原文
译文
背景
本文档定义了HTML/CSS的编写格式和风格规则。它旨在提高合作和代码质量,并使其支持基础架构。适用于HTML/CSS文件,包括GSS文件。 只要代码质量是可以被维护的,就能很好的被工具混淆、压缩和合并。
样式规则
协议
嵌入式资源书写省略协议头
省略图像、媒体文件、样式表和脚本等URL协议头部声明 (http:
, https:
)。如果不是这两个声明的URL则不省略。
省略协议声明,使URL成相对地址,防止内容混淆问题和导致小文件重复下载。
CSS Reset
- CSS Reset
- CSS Reset for HTML5
CSS属性书写顺序
参考
- Recess执行详细属性顺序
- CSS属性顺序
排版规则
缩进
每次缩进四个空格。
不要用TAB键或多个空格来进行缩进。
大小写
只用小写字母。
所有的代码都用小写字母:适用于元素名,属性,属性值(除了文本和CDATA
), 选择器,特性,特性值(除了字符串)。
行尾空格
删除行尾白空格。
行尾空格没必要存在。
元数据规则
编码
用不带BOM头的 UTF-8编码。
让你的编辑器用没有字节顺序标记的UTF-8编码格式进行编写。
在HTML模板和文件中指定编码<meta charset="utf-8">
. 不需要指定样式表的编码,它默认为UTF-8.
(更多有关于编码的信息和怎样指定它,请查看 Handling character encodings in HTML and CSS。)
注释
尽可能的去解释你写的代码。
用注释来解释代码:它包括什么,它的目的是什么,它能做什么,为什么使用这个解决方案,还是说只是因为偏爱如此呢?
(本规则可选,没必要每份代码都描述的很充分,它会增重HTML和CSS的代码。这取决于该项目的复杂程度。)
活动的条目
用TODO
标记代办事项和正活动的条目
只用TODO
来强调代办事项,不要用其他的常见格式,例如@@
。
附加联系人(用户名或电子邮件列表),用括号括起来,例如TODO(contact)
。
可在冒号之后附加活动条目说明等,例如TODO: 活动条目说明
。
CSS代码风格规则
CSS代码有效性
尽量使用有效的CSS代码。
使用有效的CSS代码,除非是处理CSS校验器程序错误或者需要专有语法。
用类似W3C CSS validator这样的工具来进行有效性的测试。
使用有效的CSS是重要的质量衡量标准,如果发现有的CSS代码没有任何效果的可以删除,确保CSS用法适当。
ID和class的命名
为ID和class取通用且有意义的名字。
应该从ID和class的名字上就能看出这元素是干嘛用的,而不是表象或模糊不清的命名。
应该优先虑以这元素具体目来进行命名,这样他就最容易理解,减少更新。
通用名称可以加在兄弟元素都不特殊或没有个别意义的元素上,可以起名类似“helpers”这样的泛。
使用功能性或通用的名字会减少不必要的文档或模板修改。
ID和class命名风格
非必要的情况下,ID和class的名称应尽量简短。
简要传达ID或class是关于什么的。
通过这种方式,似的代码易懂且高效。
类型选择器
避免使用CSS类型选择器。
非必要的情况下不要使用元素标签名和ID或class进行组合。
出于性能上的考虑避免使用父辈节点做选择器 performance reasons.
属性缩写
写属性值的时候尽量使用缩写。
CSS很多属性都支持缩写shorthand(例如font
)尽量使用缩写,甚至只设置一个值。
使用缩写可以提高代码的效率和方便理解。
0和单位
省略0后面的单位。
非必要的情况下0
后面不用加单位。
0开头的小数
省略0开头小数点前面的0。
值或长度在-1与1之间的小数,小数前的0
可以忽略不写。
URI外的引号
省略URI外的引号。
不要在url()
里用 (""
,''
) 。
十六进制
十六进制尽可能使用3个字符。
加颜色值时候会用到它,使用3个字符的十六进制更短与简洁。
前缀
选择器前面加上特殊应用标识的前缀(可选)。
大型项目中最好在ID或class名字前加上这种标识性前缀(命名空间),使用短破折号链接。
使用命名空间可以防止命名冲突,方便维护,比如在搜索和替换操作上。
ID和class命名的定界符
ID和class名字有多单词组合的用短破折号“-”分开。
别在选择器名字里用短破折号“-”以外的连接词(包括啥也没有),以增进对名字的理解和查找。
Hacks
最好避免使用该死的CSS “hacks” —— 请先尝试使用其他的解决方法。
虽然它很有诱惑力,可以当作用户代理检测或特殊的CSS过滤器,但它的行为太过于频繁,会长期伤害项目的效率和代码管理,所以能用其他的解决方案就找其他的。
CSS代码格式规则
声明顺序(以CSS属性书写顺序为准)
依字母顺序进行声明。
都按字母顺序声明,很容易记住和维护。
忽略浏览器的特定前缀排序,但多浏览器特定的某个CSS属性前缀应相对保持排序(例如-moz前缀在-webkit前面)。
代码块内容缩进
缩进所有代码块(“{}”之间)内容。
缩进所有代码块的内容,它能够提高层次结构的清晰度。
声明完结
所有声明都要用“;”结尾。
考虑到一致性和拓展性,请在每个声明尾部都加上分号。
属性名完结
在属性名冒号结束后加一个空字符。
出于一致性的原因,在属性名和值之间加一个空格(可不是属性名和冒号之间噢)。
选择器和声明分行
将选择器和声明隔行。
每个选择器和声明都要独立新行。
规则分行
每个规则独立一行。
两个规则之间隔行。
CSS元数据规则
注释部分
按组写注释。(可选)
如果可以,按照功能的类别来对一组样式表写统一注释。独立成行。