本文介绍了 Google 推荐的 html 和 CSS 编写格式规范,以建立良好的个人编码习惯。
省略图片、样式、脚本以及其他媒体文件 URL 的协议部分(:),除非文件在两种协议下都不可用。这种方案称为 protocol-relative URL,好处是无论你是使用 HTTPS 还是 HTTP 访问页面,浏览器都会以相同的协议请求页面中的资源,同时可以节省一部分字节。
- <!-- 不推荐 -->
- <script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
- <!-- 推荐 -->
- <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
- /* 不推荐 */
- .example {
- background: url("https://www.google.com/images/example");
- }
- /* 推荐 */
- .example {
- background: url("//www.google.com/images/example");
- }
一次缩进 2 个空格,不要使用 tab 或者混合 tab 和空格的缩进。
- <ul>
- <li>Fantastic
- <li>Great
- </ul>
- .example {
- color: blue;
- }
以下都应该用小写:HTML 元素名称,属性,属性值(除非 text/CDATA),CSS 选择器,属性,属性值。
- <!-- 不推荐 -->
- <A HREF="/">Home</A>
- <!-- 推荐 -->
- <img src="google.png" alt="Google">
- /* 不推荐 */
- color: #E5E5E5;
- /* 推荐 */
- color: #e5e5e5;
- 结尾空格
- <!-- 不推荐 -->
- <p>What?_
- <!-- 推荐 -->
- <p>Yes please.
在 HTML 中通过 指定编码方式,CSS 中不需要指定,因为默认是 UTF-8。
注释
使用注释来解释代码:包含的模块,功能以及优点。
任务项
用 TODO 来标记待办事项,而不是用一些其他的标记,像 @@。
- <!-- TODO: remove optional tags -->
- <ul>
- <li>
- Apples
- </li>
- <li>
- Oranges
- </li>
- </ul>
HTML 文档应使用 HTML5 的文档类型:。
孤立标签无需封闭自身,
HTML 正确性 尽可能使用正确的 HTML。
- <!-- 不推荐 -->
- <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>
- 语义化
- <!-- 不推荐 -->
- <div onclick="goToRecommendations();">
- All recommendations
- </div>
- <!-- 推荐 -->
- <a href="recommendations/">
- All recommendations
- </a>
对于像图片、视频、canvas 动画等多媒体元素,确保提供其他可访问的内容。图片可以使用替代文本(alt),视频和音频可以使用文字版本。
- <!-- 不推荐 -->
- <img src="spreadsheet.png">
- <!-- 推荐 -->
- <img src="spreadsheet.png" alt="Spreadsheet screenshot.">
标记、样式和脚本分离,确保相互耦合最小化。
如果团队中文件和编辑器使用同样的编码方式,就没必要使用实体引用,如 —, ",☺,除了一些在 HTML 中有特殊含义的字符(如 < 和 &)以及不可见的字符(如空格)。
- <!-- 不推荐 -->
- The currency symbol for the Euro is “&eur;”.
- <!-- 推荐 -->
- The currency symbol for the Euro is "€".
在引用样式表和脚本时,不要指定 type 属性,除非不是 CSS 或 JavaScript。
因为 HTML5 中已经默认指定样式变的 type 是 text/css,脚本的 type 是 text/javascript。
- <!-- 不推荐 -->
- <link rel="stylesheet" href="//www.google.com/css/maia.css"
- type="text/css">
- <!-- 推荐 -->
- <link rel="stylesheet" href="//www.google.com/css/maia.css">
- <!-- 不推荐 -->
- <script src="//www.google.com/js/gweb/analytics/autotrack.js"
- type="text/javascript"></script>
- <!-- 推荐 -->
- <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
HTML 引号 属性值用双引号。
- <!-- 不推荐 -->
- <a class='maia-button maia-button-secondary'>
- Sign in
- </a>
- <!-- 推荐 -->
- <a class="maia-button maia-button-secondary">
- Sign in
- </a>
使用有含义的 id 和 class 名称。
- /* 不推荐: 含义不明确 */
- #yee-1901 {}
- /* 不推荐: 按直觉来的 */
- .button-green {}
- .clear {}
- /* 推荐: 指定含义 */
- #gallery {}
- #login {}
- .video {}
- /* 推荐: 通用 */
- .aux {}
- .alt {}
id 和 class 应该尽量简短,同时要容易理解。
- /* 不推荐 */
- #navigation {}
- .atr {}
- /* 推荐 */
- #nav {}
- .author {}
- 选择器
- 除非需要,否则不要在 id 或 class 前加元素名。
- /* 不推荐 */
- ul#example {}
- div.error {}
- /* 推荐 */
- #example {}
- .error {}
尽量使用 CSS 中可以简写的属性 (如 font),可以提高编码效率以及代码可读性。
- /* 不推荐 */
- 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 时不用添加单位。
margin: 0;
padding: 0;
开头的 0
值在 -1 和 1 之间时,不需要加 0。
font-size: .8em;
- /* 不推荐 */
- color: #eebbcc;
- /* 推荐 */
- color: #ebc;
使用带前缀的命名空间可以防止命名冲突,同时提高代码可维护性。
- .adw - help {}
- /* AdWords */
- #maia - note {}
- /* Maia */
选择器中使用连字符可以提高可读性。
- /* 不推荐: "demo" 和 "image" 之间没有分隔符 */
- .demoimage {}
- /* 不推荐: 使用下划线 */
- .error_status {}
- /* 推荐 */
- #video-id {}
- .ads-sample {}
按照属性首字母顺序书写 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;
为了反映层级关系和提高可读性,块级内容都应缩进。
@media screen, projection {
- html {
- background: #fff;
- color: #444;
- }
- }
每行 CSS 都应以分号结尾。
- /* 不推荐 */
- .test {
- display: block;
- height: 100px
- }
- /* 推荐 */
- .test {
- display: block;
- height: 100px;
- }
属性名和值之间都应有一个空格。
- /* 不推荐 */
- h3 {
- font-weight:bold;
- }
- /* 推荐 */
- h3 {
- font-weight: bold;
- }
在选择器和 {} 之间用空格隔开。
- /* Not recommended: missing space */
- #video{
- margin-top: 1em;
- }
- /* Not recommended: unnecessary line break */
- #video
- {
- margin-top: 1em;
- }
- /* 推荐 */
- #video {
- margin-top: 1em;
- }
每个选择器都另起一行。
- /* 不推荐 */
- a: focus,
- a: active {
- position: relative;
- top: 1px;
- }
- /* 推荐 */
- h1,
- h2,
- h3 {
- font - weight: normal;
- line - height: 1.2;
- }
规则之间都用空行隔开。
- html {
- background: #fff;
- }
- body {
- margin: auto;
- width: 50%;
- }
属性选择器和属性值用单引号,URI 的值不需要引号。
- /* 不推荐 */
- @import url("//www.google.com/css/maia.css");
- html {
- font - family: "open sans",
- arial,
- sans - serif;
- }
- /* 推荐 */
- @import url( //www.google.com/css/maia.css);
- html {
- font - family: 'open sans',
- arial,
- sans - serif;
- }
分段注释:用注释把 CSS 分成各个部分。
- /* Header */
- #adw-header {}
- /* Footer */
- #adw-footer {}
- /* Gallery */
- .adw-gallery {}
来源: