本文都为个人见解,不喜勿喷,感谢
-
避免使用多类选择符
- E6以及更古老的浏览器对类似
.foo.bar
的多类选择符解析不正确
- E6以及更古老的浏览器对类似
- 移除空的css规则
.foo { }
空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积
-
正确使用display的属性
- 由于
display
的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。CSS Lint
会检查一下几点:display:inline
后不应该再使用width、height、margin、padding以及float。display:inline-block
后不应该再使用float。display:block
后不应该再使用vertical-align(设置行内包括行内块级元素,垂直方向的对齐方式)。display:table-*
后不应该再使用margin或者float。
- 由于
-
不滥用浮动(少用浮动)
- 虽然浮动不可避免,但不可否认很多css bug是由于浮动而引起。CSS Lint一旦检测出样式文件中有超过10次的浮动便会提示警告。
-
不滥用
web字体
- 浏览器下载字体时候会阻塞页面渲染损伤性能(例如:在向服务器发送请求一样)
-
不声明过多的
font-size
-
不在选择符中使用
ID标识符
- 考虑到样式重用性以及与页面的耦合性
-
标准化各种浏览器前缀
- 通常将浏览器前缀置于前面,将标准样式属性置于最后
- 类似:
.foo {-moz-border-radius: 5px;border-radius: 5px; }
-
遵守盒模型规则
- 正确使用
box-sizing
属性
- 正确使用