前端与移动
HTML 与 CSS 前端工具
前端的标记和样式问题往往同时出在结构和视觉两个层面：一份没格式化过难以审查的 HTML 或 CSS，一个画起来比凭记忆手写容易得多的 Grid 或 Flexbox 布局，两个互相抢优先级的选择器，或者一个需要自定义缓动曲线的 CSS 过渡。这些工具分两类：格式化已经写好的代码，和为手写起来痛苦的部分可视化生成代码。
格式化方面，CSS 格式化与检查、HTML 格式化与检查、JavaScript / TypeScript 格式化保留原意并标出错误，HTML 与 Markdown 转换不丢结构。CSS Grid / Flex 布局生成画出布局复制代码，CSS 渐变生成器和 CSS 效果生成器预览渐变阴影，CSS 优先级计算器对比 :is() 和 :where() 计算方式。
12 个工具
HTML / CSS / 前端代码工具常见问题
:is() 为什么没有按我预想的方式计入 CSS 优先级？
:is() 和 :where() 这两个伪类对优先级的处理方式不一样：:is() 取它参数里最高的那个优先级，:where() 无论里面写了什么都算作零优先级。CSS 优先级计算器会对比选择器得分，并说明 :is() 和 :where() 具体是怎么计入的。
怎么把一份设计图变成 CSS Grid 或 Flexbox 布局？
不用凭记忆手写 grid-template-columns 或 flex 属性，CSS Grid / Flex 布局生成让你先在画布上把布局画出来，再复制它生成的 HTML 和 CSS，比手动调数值更容易一次调对。
怎么最简单地做一条自定义 CSS 缓动曲线？
cubic-bezier() 时间函数由四个数字定义，不看曲线很难想清楚它长什么样。贝塞尔曲线编辑器可以拖动控制点调整曲线形状，实时预览生成的动画效果，再复制对应的时间函数。