google的html-css规范指南.doc

google之前出了javascript规范指南，中文翻译传送门在此，现在有了html/css规范指南，明河开始翻译时版本是2.1。后续如果google有新的内容补充，明河也会跟进。常规样式规则协议引入的assets资源文件（js、css、图片文件）忽略协议（http:, https:），比如：不推荐的写法： 推荐的写法： 不推荐的写法：.example background: url(/images/example); 推荐的写法：.example background: url(//images/example); 关于google的这点建议，明河倒是觉得有待商榷，有兴趣的朋友看/questions/4831741/can-i-change-all-my-http-links-to-just，里面有详细的讨论， 根据一位网友的测试，相对url在IE7、IE8下存在二次加载的问题。常规格式规则缩进使用二个空格缩进（PS：明河一般使用四个空格缩进-_-!） Fantastic Great .example color: blue; 大写只使用小写。所有的代码只使用小写字母（PS:淘宝的做法是如果跟js的DOM操作相关，作为钩子使用J_Trigger类似的方式）：包括元素名称、样式名、属性名（除了text/CDATA）。不推荐的写法：Home 推荐的写法： 尾部空白删掉冗余的行尾空格。不推荐的写法：What?_ 推荐的写法：Yes please. 常规Meta规则编码使用utf-8编码。指定页面的文档编码为utf-8 不需要特别指定样式引用的编码为utf-8。（ps：关于html编码指定方面的内容，可以看 Character Sets & Encodings in XHTML, HTML and CSS）注释如果可能， 注释还是必不可少的。使用注释说明下代码：它包括了什么，它的目的是什么，为什么优先使用它。行动项目（ps：推荐使用）google建议养成写TODO的习惯，特别是在项目中，记录下一些要改，但来不及修改的地方，或指派其他同事做修改。高亮TODO，不同的编辑器有不一样的方式，比如idea是TODO:。# TODO(john.doe): revisit centering #Test ApplesOranges 常规html设计规则文档类型使用html5文档声明： 不再使用XHTML（ application/xhtml+xml）。HTML 的正确性可以使用一些工具，检验你html的正确性，比如 W3C HTML validator。不推荐的写法：This is only a test. 推荐的写法： Test This is only a test. HTML 的语义性使用富含语义性的标签（ps:建议掌握html5新增的部分语义标签）。google特别指出了要确保html的可用性，看下面的代码不推荐的写法：All recommendations 推荐的写法：All recommendations 多媒体元素降级处理给多媒体元素，比如canvas、videos、 images增加alt属性，提高可用性（特别是常用的img标签，尽可量得加上alt属性，提供图片的描述信息）。不推荐的写法： 推荐的写法： html、css、javascript三层分离尽可能保持结构（html结构标签）、描述（css）、行为（javascript）的分离，并且让他们尽可能少的交互。确保html文档内容只有html的结构，将css和javascript以资源的方式引入。不推荐的写法： HTML sucks HTML sucks Ive read about this on a few sites but now Im sure: HTML is stupid!1 I cant believe theres no way to control the styling of my website without doing everything all over again! 推荐的写法： My first CSS-only redesign My first CSS-only redesign Ive read about this on a few sites but today Im actually doing it: separating concerns and avoiding anything in the HTML of my website that is presentational. Its awesome! 实体引用在html页面中避免使用实体引用。如果你的文件是utf-8编码，就不需要使用像 , ”, or 的实体引用。不推荐的写法：The currency symbol for the Euro is “&eur;”. 推荐的写法：The currency symbol for the Euro is “”. 可选的标签忽略一些可选的标签，比如不推荐的写法： Spending money, spending bytes Sic. 推荐的写法： Saving money, saving bytes Qed. html5的文档，可以忽略head、body标签。所有可忽略的标签，可以看 HTML5 specification ，type属性样式和脚本引用可以忽略type属性。不推荐的写法： 推荐的写法： 不推荐的写法： 推荐的写法： html格式规则常规格式每一块、每一列表、每一表格元素都需要另起一行，并缩进每个子元素。 Space, the final frontier. Moe Larry Curly Income Taxes $ 5.00 $ 4.50 css样式规则css验证尽可能验证css的合法性，可以使用 W3C CSS validator。id和class名使用富有含义和通用的id和class名。(ps：明河经常听周围的同事感慨，取好名字，也是个学问，有时候有些命名会让你很纠结，但好的命名的确可以提高可读性和可维护性。)使用功能性和通用性的命名方式减少文档或模板的不必要的改动。不推荐的写法：/* Not recommended: meaningless */#yee-1901 /* Not recommended: presentational */.button-green .clear 推荐的写法：/* Recommended: specific */#gallery #login .video /* Recommended: generic */.aux .alt id和class的命名风格id和class的命名在保持语义性的同时尽可能的短。不推荐的写法：#navigation .atr 推荐的写法：#nav .author 可以缩写单词，但缩写后务必能让人明白其含义。比如author缩写成atr就非常费解。选择器避免出现多余的祖先选择器。（存在性能上的差异问题，可以看 performance reasons）避免出现元素标签名作为选择器的一部分。不推荐的写法：ul#example div.error 推荐的写法：#example .error 简化css属性写法不推荐的写法：border-top-style: none;font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;padding-bottom: 2em;padding-left: 1em;padding-right: 1em;padding-top: 0; 推荐的写法：border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em; 使用简洁的属性写法有利于提高可读性和解析效率。0和单位属性值为0时，忽略单位。margin: 0;padding: 0; 属性值出现小数点忽略0font-size: .8em; url的引用使用url()时忽略刮号中的”。import url(//css/go.css); 16进制符号不推荐的写法：color: #eebbcc; 推荐的写法：color: #ebc; 前缀给选择器样式名增加前缀（可选）。在大的项目（多人协作）中使用前缀可以减少样式冲突，同时可以明确选择器归属含义。.adw-help /* AdWords */#maia-note /* Maia */ （PS:一般明河使用前缀来定位样式的归属，比如.nav-item，表明是nav导航下的子元素样式。）id和class名的分隔符单词使用“-”来连接。不推荐的写法：/* Not recommended: does not separate the words “demo” and “image” */.demoimage /* Not recommended: uses underscore instead of hyphen */.error_status 推荐的写法：#video-id .ads-sample Hacks尽可能地避免使用hack的方式解决浏览器样式兼容性问题。（ps：明河觉得这个很难，毕竟IE横在那里。）尽量避免使用CSS filters。css格式规则css属性按字母顺序书写（PS：排序忽略浏览器前缀，比如-moz-，-webkit-）background: fuchsia;border: 1px solid;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;color: black;text-align: center;text-indent: 2em; 块内容缩进media screen, projection html background: #fff; color: #444; 缩进所有的块状内容。不可缺少的;不推荐的写法：.test display: block; height: 100px 推荐的写法：.test display: block; height: 100px; 属性值前增加个空格不推荐的写法：h3 font-weight:bold; 推荐的