首页 > 代码库 > google的html、css代码规范（转）
google的html、css代码规范（转）
看了一下google的html、css代码规范,简单的作下记录。
一、省略ur地址中的 http: 或 https: 的部分 , 在引用样式表文件、脚本文件、图片以及其它媒体文件时，都可以这样做，除非使用这两种协议都无法获取到资源，也就是说必须使用其它协议才能获取到资源的，就不能省略啦，只有http:和https:是可以省略的。这样做的好处是能减少文件的体积，而且还能避免一些相对url中混乱问题的产生。
<!-- 不推荐 --><script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script><!-- 推荐 --><script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>/* 不推荐 */.example { background: url(http://www.google.com/images/example);}/* 推荐 */.example { background: url(//www.google.com/images/example);}二、通用代码风格
1、每次缩进两个空格，不要使用tab键进行缩进，也不要把tab键以及空格混合起来进行缩进。单纯的使用空格进行缩进就好了。
<ul> <li>Fantastic <li>Great</ul>.example { color: blue;}2、只使用小写，包括标签名、属性名、属性值（一些可以自定义的字符串属性值除外）
<!-- 不推荐 --><A HREF="http://www.mamicode.com/">Home</A><!-- 推荐 --><img src="http://www.mamicode.com/google.png" alt="Google">
三、通用Meta规则
1、确保你的IDE使用的是UTF-8编码来保存文件的，且不要带上BOM。在定义页面的编码时使用<meta charset="utf-8"> 就好了。在样式表文件里不用去声明UTF-8编码什么的。
2、在需要地地方进行注释。
3、用 TODO 来标志代码中需要完善的地方
<!-- TODO: remove optional tags --><ul> <li>Apples</li> <li>Oranges</li></ul>
四、HTML书写规则
1、文档类型。HTML5的文档类型对所有的html文档都适用：<!doctype html>。另外，最好使用html,而不是xhtml.
2、使用规范化的html，并使用W3C HTML validator之类的工具来进行检测。
<!-- 不规范 --><title>Test</title><article>This is only a test.<!-- 规范 --><!DOCTYPE html><meta charset="utf-8"><title>Test</title><article>This is only a test.</article>
3、使用语义化的html标签，根据用途来选择标签。
<!-- 不推荐 --><div onclick="goToRecommendations();">All recommendations</div><!-- 推荐 --><a href="http://www.mamicode.com/recommendations/">All recommendations</a>
4、把多媒体元素可知化。像图片、视频、动画等多媒体元素，要有相关的文字来体现其内容，比如<img> 可以使用alt属性来说明图片内容。
<!-- 不推荐 --><img src="http://www.mamicode.com/spreadsheet.png"><!-- 推荐 --><img src="http://www.mamicode.com/spreadsheet.png" alt="Spreadsheet screenshot.">
5、确保页面的 结构、样式、行为三者相分离。确保文档或模板中只包含html，把用到的样式都写到样式表文件中，把脚本都写到js文件中。这在多人协作时非常重要。
<!-- Not recommended --><!DOCTYPE html><title>HTML sucks</title><link rel="stylesheet" href="http://www.mamicode.com/base.css" media="screen"><link rel="stylesheet" href="http://www.mamicode.com/grid.css" media="screen"><link rel="stylesheet" href="http://www.mamicode.com/print.css" media="print"><h1 style="font-size: 1em;">HTML sucks</h1><p>I’ve read about this on a few sites but now I’m sure: <u>HTML is stupid!!1</u><center>I can’t believe there’s no way to control the styling of my website without doing everything all over again!</center><!-- Recommended --><!DOCTYPE html><title>My first CSS-only redesign</title><link rel="stylesheet" href="http://www.mamicode.com/default.css"><h1>My first CSS-only redesign</h1><p>I’ve read about this on a few sites but today I’m actually doing it: separating concerns and avoiding anything in the HTML of my website that is presentational.<p>It’s awesome!
6、优化标签。有些标签是不需要用到的，能少就少。可以参考HTML5 specification来知道哪些标签是必须的，哪些又是多余的。
<!-- Not recommended --><!DOCTYPE html><html> <head> <title>Spending money, spending bytes</title> </head> <body> <p>Sic.</p> </body></html><!-- Recommended --><!DOCTYPE html><title>Saving money, saving bytes</title><p>Qed.
7、省略<style>和<script>的type属性
五、HTML代码的格式化。
1、为每个块级元素或表格元素标签新起一行，并且对每个子元素进行缩进
<blockquote> <p><em>Space</em>, the final frontier.</p></blockquote><ul> <li>Moe <li>Larry <li>Curly</ul><table> <thead> <tr> <th scope="col">Income <th scope="col">Taxes <tbody> <tr> <td>$ 5.00 <td>$ 4.50</table>
六、css书写规则
1、使用合法、规范的css,可以通过W3C CSS validator来进行验证。
2、ID和class的命名尽可能短，并符合语义。
/* Not recommended */#navigation {}.atr {}/* Recommended */#nav {}.author {}
3、尽量少用多重选择器或后代选择器，因为这会影响性能。
/* Not recommended */ul#example {}div.error {}/* Recommended */#example {}.error {}4、使用组合属性。css中提供了不少的能进行组合属性连写的地方。比如font,margin,padding等。
/* Not recommended */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;/* Recommended */border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em;
5、如果css属性的值为0,则后面不要带上单位。除非真的是需要。
margin: 0;padding: 0;
6、省略小数前面的0。比如 0.8 可以写成 .8
7、在URI类型的值里不要加上引号。比如 @import url(//www.google.com/css/go.css);
8、如果有可能，尽量使用3个字符的十六进制数。
/* Not recommended */color: #eebbcc;/* Recommended */color: #ebc;
9、使用特定的前缀
.adw-help {} /* AdWords */#maia-note {} /* Maia */10、在ID和class中使用 - 来作为连字符。
/* Not recommended: does not separate the words “demo” and “image” */.demoimage {}/* Not recommended: uses underscore instead of hyphen */.error_status {}/* Recommended */#video-id {}.ads-sample {}11、避免使用css hack，首先考虑使用另一种写法来解决。
七、css格式化规则
1、按字母的先后顺序来进行css属性的声明，但某些浏览器的私有前缀可以不算进来。
background: fuchsia;border: 1px solid;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;color: black;text-align: center;text-indent: 2em;
2、对处在{}中的语句进行缩进。
@media screen, projection { html { background: #fff; color: #444; }}3、每个css属性声明后都要使用一个分号，即使是最后的那个。
/* Not recommended */.test { display: block; height: 100px}/* Recommended */.test { display: block; height: 100px;}4、在紧跟属性名的冒号后使用一个空格
/* Not recommended */h3 { font-weight:bold;}/* Recommended */h3 { font-weight: bold;}5、每一个css选择器或是属性声明都要新起一行。
/* Not recommended */a:focus, a:active { position: relative; top: 1px;}/* Recommended */h1,h2,h3 { font-weight: normal; line-height: 1.2;}6、在每一个css规则之间应该空一行
html { background: #fff;}body { margin: auto; width: 50%;}
个人认为，代码规范这种东西是见仁见智的，目的就是为了更好的进行团队合作以及保证代码的质量，在实际运用途中还是要结合实际情况。
更多详细：http://www.cnblogs.com/2050/archive/2012/04/26/2470947.html