!important
只在起辅助作用的 class 上用 !important。用 !important 提升优先级也可以，例如如果你要让某条规则一直生效的话，可以用 .error { color:red!important; }。
避免主动使用 !important。例如 CSS 写得很复杂时不要用它来取巧，要好好整理并重构之前的部分，保持选择器简短并且避免用 ID 将效果拔群。
魔数与绝对定位
魔数（Magic Number）是指那些「凑巧有效果」的数字，使用魔数非常不好，因为它们只是治标不治本而且缺乏拓展性。
例如使用 .dropdown-nav li:hover ul { top: 37px; } 把下拉菜单移动下来远非良策，因为这里的 37px 就是个魔数。37px 会生效的原因是因为这时 .dropbox-nav 碰巧高 37px 而已。
这时你应该用 .dropdown-nav li:hover ul { top: 100%; }，也即无论 .dropbox-down 多高，这个下拉菜单都会往下移动 100%。
每当你要在代码中放入数字的时候，请三思而行。如果你能用一个关键字（例如 top: 100% 意即「从上面拉到最下面」）替换之，或者有更好的解决方法的话，就尽量避免直接出现数字。
你在 CSS 中留下的每一个数字，都是你许下而不愿遵守的承诺。
条件判断
专门为 IE 写的样式基本上都是可以避免的，唯一需要为 IE 专门处理的是为了处理 IE 不支持的内容（例如 PNG）。
简而言之，如果你重构 CSS 的话，所有的布局和盒模型都不用额外兼容 IE。也就是说你基本上不用 <!–[if IE 7]> element{ margin-left:-9px; } < ![endif]–> 或者类似的兼容 IE 的写法。
Debugging
如果你要解决 CSS 问题的话，先把旧代码拿掉再写新的。如果旧的 CSS 中有问题的话，写新代码是解决不了的。
把 CSS 代码和 HTML 部分删掉，直到没有 BUG 为止，然后你就知道问题出在哪里了。
有时候写上一个 overflow: hidden 或者其它能把问题藏起来的代码的确效果立竿见影，但是 overflow 方面可能根本就没问题。所以要治本，而不是单纯治标。
CSS 预处理器
我用 Sass。使用时应当灵活运用。用 Sass 可以令你的 CSS 更强大，但是不要嵌套得太复杂。在 Vanilla CSS 中，只在必要的地方用嵌套即可，例如：
CSS Code复制内容到剪贴板
.header{}
.header .site-nav{}
.header .site-nav li{}
.header .site-nav li a{}
这样的写法在普通 CSS 里完全用不到。以下为不好的 Sass 写法：
CSS Code复制内容到剪贴板
.header{
.site-nav{
li{
