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

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

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

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

CSS 分离与合并

该怎么说呢，

一部分代码其实可以分离成 pt1 代表 padding-top: 1rem 的，

而另一部分代码可以合并成 .icon {...} .icon-heart {...} 的，

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

.item a 要比 .link 慢得多

这得从渲染树的渲染说起，它遵从“从右至左”原则，也就是遍历一遍 a，再找到 .main_menu_item，想想多可怕吧。

.box.box1 形态你以为是很快嘛，骚年，不要太天真。

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

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

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

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

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

但 .x > * 这种情况真的很难界定，显然他是很烧的，但又确保了 .x 下的子级标签可以多样，所以表示我也很难抉择。

宽度分离

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

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

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

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

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

完全兼容 or 渐进增强

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

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

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

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

CSS 命名里面有大学问