1.CSS HINT的遵守的相关规则
- 不要使用多个class选择元素，如a.foo.boo,在ie6下无法解析
- 移除空的css规则，如a{}
- 正确的使用属性，如display:inline不要和width、height、margin、padding同时使用,display:inline-block不要和float使用
- 避免过多的浮动，当浮动次数超过10倍时会出现警告
- 避免使用过多的字号，当字体超过10钟会出现警告
- 避免使用过多的web字体，当使用超过5次时，会显示警告
- 避免使用id作物样式选择器
- 标题元素只定义一次
- 使用width：100%要小心。（块状元素的宽带默认100%）
- 属性值为0时不要单位
- 各浏览器的css要有规范例如.foo{-moz-border-radius:5px;border-radius:5px}
- 避免使用看起来像正则表达式的css3选择器
- 遵守盒模型规则
2.css规范检查工具
非工程化规范检查
非工程化检查可以使用http://csslint.net/
工程化检查
在webpack等工程化环境中，我们可以使用CSSHint去检查css，CSSHint是基于NodeJS的代码检查工具。当前规则基于ecomfe CSS STYLE SPEC。它还涵盖了CSSLint 规则 CSS STYLE SPEC规则网站：github.com/ecomfe/spec… 以下时cssHint的安装和使用
- 安装更新
$ [sudo] npm install csshint [-g]
$ [sudo] npm update csshint [-g]
- 在cli中用法
$ csshint -v // show version
$ csshint [filePath|dirPath] // run csshint on file or dir
