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