Google CSS 代码风格指南

CSS代码风格规则

CSS代码有效性

尽量使用有效的CSS代码。

使用有效的CSS代码 除非是处理CSS校验器程序错误或需要专有语法。

用类似W3C CSS validator 这样的工具来进行有效性的测试。

使用有效的CSS是重要的质量衡量标准 如果发现有的CSS代码没有任何效果的可以删除 确保CSS用法适当。

ID和class的命名

为ID和class取通用且有意义的名字。

应该从ID和class的名字上就能看出这元素是干嘛用的 而不是表象或模糊不清的命名。

应该优先虑以这元素具体目来进行命名 这样 就最容易理解 减少更新。

通用名称可以加在兄弟元素都不特殊或没有个别意义的元素上 可以起名类似"helpers"这样的泛。

使用功能性或通用的名字会减少不必要的文档或模板修改。

 /* 不推荐: 无意义 不易理解 */ #yee-1901 {}  /* 不推荐: 表达不具体 */ .button-green {} .clear {} /* 推荐: 明确详细 */ #gallery {} #login {} .video {}  /* 推荐: 通用 */ .aux {} .alt {} 

ID和class命名风格

非必要的情况下 ID和class的名称应尽量简短。

简要传达ID或class是关于什么的。

通过这种方式 似的代码易懂且高效。

 /* 不推荐 */ #navigation {} .atr {} /* 推荐 */ #nav {} .author {} 

类型选择器

避免使用CSS类型选择器。

非必要的情况下不要使用元素标签名和ID或class进行组合。

出于性能上的考虑避免使用父辈节点做选择器 performance reasons.

 /* 不推荐 */ ul#example {} div.error {} /* 推荐 */ #example {} .error {} 

属性缩写

写属性值的时候尽量使用缩写。

CSS很多属性都支持缩写shorthand （例如 font ） 尽量使用缩写 甚至只设置个值。

使用缩写可以提高代码的效率和方便理解。

0和单位