CSS 命名里面有大学问

其实迟迟不敢开始写关于样式里布局方面的心得，

因为大多数人眼中，哪需要管那么多，只需要最终效果达到了就行了呗。

然而，即使是如今国内外顶级大牛也不敢说自己是个优秀的 CSS 工程师。

一般大公司都是 html 和 css 是分开来写的，一个负责结构和语义，一个负责布局和样式，可见这茬子事并不简单...

 

CSS 分离与合并

该怎么说呢，

一部分代码其实可以分离出来成为 pt1，代表 padding-top: 1rem 这样的，很多地方可重用；

而另一部分代码可以由多个相似合并成一个，这个我们用得最多了，都懂的。

分离与合并看似矛盾，但都是为精简代码而产生，需要程序员强大的控制力（特别是多页面使用同一 CSS 文件时）。

 

语义和重用

这两者看似也是矛盾，比如 .index_header_login_btn 拥有十足的语义，但也注定只能被用在首页头部的登录按钮上，失去了复用性。

写多个类去满足复用性不无不可，只是曾写过 #index_header_login_btn .login_btn .btn .btn-sm .btn-outline 之后，我并不认为这事简单了。

 

.item a 要比 .link 慢得多

这得从渲染原理说起，它遵从“从右至左”原则，

按我的想法来看，一个名称就是渲染树的一个分支，要找 .x 下的 a，得先遍历树，找到 a，再遍历一遍找到 .x，比对层叠覆盖样式，可怕吧。

.box.box1 形态你以为是限定得越死越容易查找就会渲染越快吗，骚年，不要太天真，它是一次次重头遍历的。

不要否定，.x 这种最直接的命名方式渲染效率是最高的。（这条建议很重要）

 

拒绝 ID！拒绝层级！拒绝标签！

他们的存在只是为了提升样式优先级而已的，都限定死范围了，还谈何重用。

ID 就让它去和 js 搞就好了，不要让它加入到 CSS 的世界里。

 

性能消耗最大选择器应该是 * 和多 class 选择器(比如 .foo.bar)

.x > * 显然他是很烧的，但又实在没有更好替代办法，所以表示我也很难抉择。

 

宽度分离

这也是为什么菜单我们总是用 ul > li > a 来套，而不是 div > a 的原因，a 的父级去设宽高，a 负责 padding 就好了。

能不设宽度坚决不设，不但是弹性布局的基础，也是避免子级设宽高溢出，

另外在没有 border-box 的情况下，padding 的更改还得牵扯到 width 的重新计算。

其实没有宽度，也还是可以通过 padding | margin | absolute 来进行设定的。

写码一时爽，微调和改需求才是常态...

 

完全兼容 or 渐进增强

其实吧，这方面我自己都没怎么在乎过，实在不是一个好的前端...

比如 [type="range"] 在各家浏览器上模样都不一样，那要不要完全兼容非得搞成一个样呢，

但 text-shadow 在一些浏览器上不支持，是不是就不管了呢，

这个问题，因人而异吧。此时庆幸自己是个金牛座。