cssfmt：CSS代码格式化工具
CSS 编码指南：让你的样式表更清晰、更易维护
大家平时写 CSS 的时候有没有一种“怎么感觉越写越乱”的感觉？一开始写得很清爽，一个 .btn 就能搞定；后来样式一多，重构两次之后自己都看不懂了，尤其是多人一起开发的项目，一打开文件全是重复、覆盖、!important 到处飞……想改点东西，简直生怕一动就全崩了。这时候，CSS 风格指南真的就派上用场了。
虽然 CSS 是个挺“佛系”的语言，不报错、不抛异常，语法看起来也很“轻松”，但正因为它太自由了，一旦项目稍微复杂一些，不统一的写法马上就成了灾难。尤其是在多人合作的项目里，不同人有不同写法、不同命名习惯、不同组织结构，那就真的容易写成一团糟，最后没人敢碰 CSS 文件，宁愿新建一份重新来。
这也是为什么越来越多团队开始重视 CSS 编码规范和风格指南的原因。它不是限制你的自由，而是帮你和团队保持一致的思路和方式，从而达到以下几个目标：
- 样式表更可维护：谁都能接手、谁都能改，不怕改一行崩一片。
- 代码更清晰、透明：一眼就知道这个 class 是干嘛的、这个规则属于哪个模块。
- 结构更可扩展：后面要加新功能、新模块，不需要重写或拆掉老的 CSS。
那风格指南都包括哪些东西呢？主要是围绕如何编写 CSS 这件事，提出一套统一的建议，比如：
✅ 命名规范
BEM（Block-Element-Modifier） 是目前最流行的一种命名方式，比如：
css
.card {}
.card__title {}
.card--featured {}
这样不仅能看出结构关系，还能减少命名冲突。
✅ 文件组织结构
小项目可能一个 style.css 就搞定了，但大项目最好按功能、组件、页面拆分模块，比如：
/styles
/components
button.css
card.css
/layouts
grid.css
header.css
main.css
让样式也有清晰的“家”，不再一锅炖。
✅ 注释和文档说明
不要小看注释，一个好的注释能帮别人（或者几个月后的你）迅速理解代码意图，尤其是一些非标准 hack 或 workaround，更是必须注明理由。
✅ 避免重复和冲突
不要重复定义颜色、间距、字体尺寸，最好用变量或者工具类统一管理。还有尽量少用 !important，能不用就不用。
✅ 选择器合理化
避免太长的嵌套选择器，控制选择器的“权重”，避免因为优先级问题导致后期难以覆盖样式。
✅ 新人友好
风格指南其实还有一个隐形作用：帮助新成员快速融入项目。只要你把规范文档写得够清楚，新人来了马上就知道该怎么写、用什么命名规则，怎么组织文件，怎么提样式 PR，团队协作效率直接起飞。
当然了，这种指南不能只是贴在墙上，得落实到每个开发流程里，比如：
- 在项目初始化时就附带
README或CONTRIBUTING.md写好 CSS 编写规则； - 代码评审（code review）时严格按照规范来审；
- 有必要时引入 CSS lint 工具来强制规则，比如
stylelint； - 定期整理和更新样式文件，清理冗余规则。
在我参与的一些长期维护的项目里，最痛苦的就是前期没有统一规范，等到代码量大了、需求多了、开发人员换了，样式文件就跟黑魔法一样，谁都不敢动，哪怕只是想改个颜色都要全站搜索一遍看有没有被复用过。
但自从我们团队建立了自己的 CSS 风格指南之后，情况就完全不一样了。现在我们写样式都有章可循，新人一两天就能上手维护样式，而且整体样式表干净了很多，再也不用搞一堆覆盖、拆文件、写备份版本那一套了。
感觉嘛，一个好的 CSS 风格指南其实就像一份写给“未来的你”和“队友”的说明书，让大家都站在同一个起点上去思考和写代码。这样写出来的 CSS，才不容易变成一堆“定时炸弹”，而是一个清晰、健壮、能长期演化的系统。真的建议每个写 CSS 的人都认真搞一份属于自己项目的风格指南，你会发现工作变得更轻松了不少。
