总目录
通用风格守则
协议
通用格式化守则
缩进, 大小写, 末尾空格
通用元数据守则
编码, 注释, 行为项
HTML风格守则 文档类型, HTML代码有效性, 语义化, 多媒体文件回滚(Fallback), 结构和表现和行为的分离, 实体引用, 可选标签, 类型属性
HTML格式化守则
通用格式化, HTML引号
CSS风格守则 CSS代码有效性, ID和Class命名,ID和Class名风格, 类型选择器, 简写属性, 0和单位, 0开头的十六进制表示法, 前缀, ID名和类名的分隔符, HACKS
CSS格式化守则
声明顺序, 内容块缩进, 声明结束, 属性名结束, 声明块分隔, 选择器和声明分隔, 规则间分隔, CSS引号
CSS元数据守则
分块注释
背景
本文档定义了HTML和CSS的格式化和风格守则. 旨在改善协作,提高代码质量, 启用支撑基础建构. 适用于原生的使用HTML和CSS的文件, 包括GSS本身. 只要保持通用的代码质量, 就可以使用工具对代码进行混淆, 优化和编译.
说明
代码中红色代表不推荐,绿色代表推荐
通用风格守则
协议:把图片、媒体文件、样式表和脚本URL中的协议部分(http:,https:)省略掉，除非文件使用的不是这两种协议.这种方法使URL变成相对地址，可以避免混合内容的问题，同时略微地减少代码量.
通用格式化守则
缩进:使用两个空格来缩进.不要使用tab或者tab跟空格混合使用.
大小写:都用小写字母,包括：元素名、属性名、属性值(除了text/CDATA)、选择器、CSS属性值,当然字符串中可以大写.
末尾空格:去掉所有的末尾空格,它们是不必要的,有时候会带来麻烦.
通用元数据守则
编码:使用UTF-8(无BOM)格式编码,确保是无BOM的.在HTML中通过来指定编码, 样式表文件默认为UTF-8因而不需要指定.(关于编码的更多信息可以在Handling character encodings in HTML and CSS查看.)
注释:在必要的地方都应该添加注释,起到解释代码的作用.(这条规则可以视情况做选择,因为注释太过详尽有时会让HTML和CSS显得臃肿. 但是对于比较复杂的项目,适当的注释还是非常必要的.)
行为项:用 TODO 标记待办事项和行为项.只使用 TODO 关键字高亮待办事项,而不使用常见的 @@ 格式.用 TODO(contact) 的格式,在括号内追加一个联系人(包含姓名,邮件列表).用 TODO: action item 格式追加行为项.
HTML风格守则
文档类型:对于所有的HTML文档,都推荐使用HTML5的doctype:. 另外,建议使用HTML语法,而不是XHTML.XHTML在浏览器支持和基础, 优化余地方面, 相比于HTML有所欠缺. 对于空元素不用关闭,如
,无需写成
.
HTML代码有效性:尽量书写合法的HTML代码，除非你是为了减小HTML文件体积。使用W3C HTML validator来校验代码.保证HTML的有效性是一条底线.
语义化:要根据HTML各个元素的用途来选用标签，例如，标题使用h1-h6，段落使用p，链接使用a，等等.这一点也很重要，涉及到可访问性、重用以及代码效率的问题.
多媒体文件回滚:为多媒体文件提供可替代的内容.例如,对图片,视频,画布动画等多媒体文件提供可替代的内容.给图片提供alt文档; 如果可以的话,给音频和视频分别提供副本和说明. 盲人用户可以通过 @alt 能够知道图片,视频,音频的内容描述. 如果图片数量过多造成负担，或者图片只是在样式渲染之前起一个临时作用，那么可以写成alt=""
结构、表现和行为分离:严格地将结构(标签)、表现(样式表)和行为(脚本)三者分离开来，也就是确保HTML中只包含结构性的内容，避免使用一些表现层面的标签，把表现性的东西丢进样式表文件，行为部分丢进脚本文件。而且，也要尽量减少外部样式表和脚本文件的数量. 这一点非常重要，否则后期维护的成本会很大.
实体引用:没必要使用实体引用，如—，”，☺,前提是团队之中编辑器和文件都使用UTF-8编码.可以使用实体的情况如下:对于在HTML中具有特殊意义的字符(如<和&)，控制字符，和不可见的字符如
可选标签:出于减小文件体积等目的，HTML5规范规定了一些可以省略的标签.(这一点可能需要更多的时间去适应，因为目前的众多开发者都还不习惯这么做. 但是出于一致性和简洁性的原因，把可选标签全都省略掉是最好的做法.)
类型属性:省略样式表文件和脚本文件的type属性，除非使用的不是CSS(比如LESS)或者不是JavaScript. 在HTML5中text/css和text/javascript是默认值，因此没有必要指定，对于较早的浏览器甚至也可以行得通.
HTML格式化守则
通用格式化:每一个块、列表或者表格都另起新行，并且对它们的每一个子元素都使用缩进.如果不想让列表项之间出现空文本节点，可以把所有的li放在一行.
HTML引号:HTML属性值一律使用双引号("")，而不是单引号("").
CSS风格守则
CSS代码有效性:尽量确保CSS代码合法，除非要使用一些浏览器私有属性. 用W3C CSS validator来校验代码.使用有效的CSS代码,是评测质量基准线, 可以判断出哪些代码没有作用, 可以删除,同时保证CSS有效性.
ID和class命名:使用有意义的ID名和类名，尽量使名字能够体现出元素的功能，取最容易理解的,不容易改变的命名，不要使用表现层面的命名. 类属命名为和兄弟元素之间没有区别的元素,提供了一个简单的回滚策略. 它们起到了典型的辅助工具的作用. 使用泛函或者类属命名, 能减少了非必要文档和模板改变的可能性.
ID和class名风格:ID和class的命名应当尽量短，在简洁的同时要能够表达出应有的意思.
类型选择器:在ID和类名前面不要再加标签名，除非是出于优先级等其他原因. 这对性能提升是很有用的.
简写属性:尽量使用简写的属性(例如font)，即使你只设置其中的一个属性. 这对于代码效率和可读性有好处
0和单位:0值的后面不要跟单位，除非必需.
开头的0:对于-1到1之间的值，可以省略开头的0
0开头的十六进制表示法:对于可缩写的颜色值，尽量使用三个字符来表示，更简洁.
前缀:给选择器加上一个所属应用的前缀，中间用连词符连接. 不一定非要这样做，但在一些大的项目中，这样可以有效避免命名冲突的问题.
ID名和类名的分隔符:不要用除了连词符以外的字符来分隔类名，这样能够提高可读性.
HACKS:不要探测UA，也不要使用CSS hack，先尝试用其他的办法解决. UA探测和hack应该作为最后的手段，它们会影响代码效率和可维护性. 遇到问题就想到使用hack不是一种好的思路.
CSS格式化守则
声明顺序:按照首字母顺序来排列CSS规则，方便维护. 排列时可以不考虑私有属性前缀，但-moz应当排在-webkit前.
内容块缩进:对每一个代码块都使用缩进，使层次结构更清晰，可读性更高.
声明结束:在最后一条规则的末尾也加上分号，保持一致性，同时方便以后继续添加规则.
属性名结束:为了一致性,在冒号和属性值之间添加一个空格, 属性名和冒号之间不加空格.
声明块分隔:在最后一个选择器和声明块之间添加一个空格;声明块的起始花括号应该和最后一个选择器处于同一行.
选择器和声明分隔:对每个选择器和声明都使用新行分隔.
规则分隔:在每一个规则块之间打一个空行.
CSS引号:在属性选择器和属性值中都用单引号.URI值(url())中不要用引号.例外:如果你要使用 @charset 规则,只能用双引号
CSS元数据守则
分块注释:尽量用注释对代码分块. 块与块之间用空行分开.
最后几句话:保持一致性.如果你要编辑代码,先观察一下代码的风格;如果他们在算术运算符两侧使用了空格,你也应该使用相同数量的空格;如果他们注释中使用了 # 号,你也应该使用.风格指南的意义,使不同人写的代码拥有共同的编写词汇,所以能够将注意力放在内容上,而不是表达方式上.我们在此呈现了一种全局风格,但是本地风格也很重要.尽量保持你写的代码与已存在的代码的风格保持一致.
英文原文：https://google.github.io/styleguide/htmlcssguide.xml?showone=Optional_Tags#Protocol
译者：baijiale
大连人流医院哪家好 http://www.fkyy120.net/
大连阳痿医院哪家好 http://www.84211111.net/