工程师css

我见过太多工程师把CSS当敌人。工程他们写代码像写作文，工程每个选择器都恨不得加个ID，工程每个样式都往死里堆!important。工程这不对。工程CSS不是工程战场，是工程工具箱。真正懂行的工程人，会像老木匠挑刨子一样挑属性。工程

上周三，工程隔壁组的工程小王改了个按钮颜色。他改了半小时，工程最后提交的工程代码里躺着七行!important。我路过他屏幕时笑了——那按钮原来是工程background: #fff，他加了五层覆盖，工程就为了把白色变成浅灰。这让我想起刚入行时自己写的样式表，两千行全是血泪，改一个间距要全局搜索三次。

后来我学会了一件事：CSS的核心不是写样式，是管理覆盖关系。你写的每一行代码，都是在跟浏览器默认样式、框架样式、队友写的旧样式谈判。谈判破裂的代价就是页面崩掉，或者你加班。

具体怎么做？我给自己定了个土规矩：能不用类名就不用类名，能用继承就不用重写。比如那个按钮，其实只要在父容器上加个color-scheme，或者直接改CSS变量——--btn-bg: #eee，一行搞定，后面的人还看得懂。小王的代码虽然能跑，但三个月后他自己回来看，八成得骂娘。

还有个更隐蔽的坑是选择器优先级。有人喜欢写#app .main .content .btn，看着挺严谨，其实脆得像饼干。我见过一个页面，因为某位老兄写了div div div p这种链式选择器，结果后来加了个新模块，整个页面的字体都歪了。调试那晚我抽了半包烟，最后发现是权重计算出了偏差。

说真的，CSS这玩意儿最反直觉的地方在于：它不按你写的顺序执行，而是按权重和来源排序。内联样式压外部文件，ID压类名，后加载的压先加载的——除非前面有!important。这套规则比JavaScript的闭包还绕，但绕也得记住。因为忘了它，你就在给未来的自己埋雷。

我现在写样式有个习惯：先想清楚“这个元素跟谁有关联”，再动手。比如导航栏的激活态，我不会单独设一个.active类，而是用:target伪类或者aria-current属性。这样既省代码，又让HTML结构更干净。有个同事笑话我“矫情”，直到他接手我做的页面，改需求时只动了三行，他闭嘴了。

当然，我不是说所有CSS都得精简到极致。有些场景，重复就是力量。比如打印样式，你得把每个页面块的边距都写清楚，不然打印机吐出来的纸能让你怀疑人生。但那是例外，不是常态。

最后说个真事：上个月我们重构旧项目，老代码里有个.clearfix，用了十几种清除浮动的手法，从zoom到overflow全齐了。我删掉那两百行，换成一行display: flow-root，页面纹丝不动，但加载快了0.3秒。旁边测试妹子问我：“你删了什么？”我说：“删了十年前某个工程师的焦虑。”

CSS就是这样，它不聪明，但也不笨。它只是诚实地反映你怎么想问题。想清楚了，它就是你手里的刻刀；想不清楚，它就是满地碎玻璃。工程师的浪漫，大概就是把这堆碎玻璃，一片片拼成能用的镜子。