- 避免过度约束
- 避免后代选择符
- 避免链式选择符
- 使用紧凑的语法
- 避免不必要的命名空间
- 避免不必要的重复
- 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
- 避免！important，可以选择其他选择器
- 尽可能的精简规则，你可以合并不同类里的重复规则
- 修复解析错误
- 避免使用多类选择符
- 移除空的css规则
-
正确使用display的属性：由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
display:inline后不应该再使用width、height、margin、padding以及float。
display:inline-block后不应该再使用float。
display:block后不应该再使用vertical-align。
display:table-*后不应该再使用margin或者float。
- 不滥用浮动：虽然浮动不可避免，但不可否认很多css bug是由于浮动而引起。
-
不滥用web字体
对于中文网站来说Web Fonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。
- 不声明过多的font-size：这是设计层面的问题，设计精良的页面不会有过多的font-size声明。
- 不在选择符中使用ID标识符，主要考虑到样式重用性以及与页面的耦合性。
- 不给h1~h6元素定义过多的样式
- 全站统一定义一遍heading元素即可，若需额外定制样式，可使用其他选择符作为代替。
- 不重复定义h1~h6元素
- 值为0时不需要任何单位
- 标准化各种浏览器前缀：通常将浏览器前缀置于前面，将标准样式属性置于最后，类似：
.foo{ -moz-border-radius: 5px; border-radius: 5px; } - 使用CSS渐变等高级特性，需指定所有浏览器的前缀
- 避免让选择符看起来像正则表达式
- CSS3添加了一些类似~=等复杂属性，也不是所有浏览器都支持，需谨慎使用。
- 遵守盒模型规则（Beware of broken box models）
取经自掘金Coderfei
来源：https://www.cnblogs.com/qq965921539/p/12453305.html