标签：
其实迟迟不敢开始写关于样式里布局方面的心得，
因为大多数人眼中，哪需要管那么多，只需要最终效果达到了就行了呗。
然而，即使是如今国内外顶级大牛也不敢说自己是个优秀的 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 在一些浏览器上不支持，是不是就不管了呢，
这个问题，因人而异吧。此时庆幸自己是个金牛座。
标签：
原文地址：http://www.cnblogs.com/foreverZ/p/5885828.html
