调整字号

Google HTML/CSS代码风格指南

本文翻译自Google HTML/CSS Style Guide

Google发布过各种编程语言的代码风格指南,今天看了一下关于HTML/CSS的,顺便整理翻译了下其中有用的东西,放在这里。Google的东西看一下还是会受益很多的,遵守这些规则,能够渐渐帮你形成良好的代码风格,同时在性能方面也很有益。留作参考吧。

通用风格守则

协议

把图片、媒体文件、样式表和脚本URL中的协议部分(http:,https:)省略掉,除非文件使用的不是这两种协议。这种方法使URL变成相对地址,可以避免混合内容的问题,同时略微地减少代码量。

【注:关于混合内容的问题(mixed content issues),可以看另一篇文章《关于URL中协议的省略》。】

<!-- 不推荐 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- 推荐 -->
<script src="//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);
}

通用格式化守则

缩进

使用两个空格来缩进。不要使用tab或者tab跟空格混合使用。

<ul>
  <li>Fantastic
  <li>Great
</ul>/
.example {
  color: blue;
}

大小写

所有代码都用小写字母,包括:元素名、属性名、属性值(除了text/CDATA)、选择器、CSS属性值,当然字符串中可以用大写。

<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png" alt="Google">

末尾空格

去掉所有的末尾空格,它们是不必要的,有时候会带来麻烦。

<!-- 不推荐 -->
<p>What?_
<!-- 推荐 -->
<p>Yes please.

通用元数据守则

编码

使用UTF-8(无BOM)格式编码,确保是无BOM的。

在HTML中通过<meta charset="utf-8">来指定编码,样式表文件默认为UTF-8因而不需要指定。

(关于编码的更多信息可以在Handling character encodings in HTML and CSS查看。)

注释

在必要的地方都应该添加注释,起到解释代码的作用。

(这条规则可以视情况做选择,因为注释太过详尽有时会让HTML和CSS显得臃肿。但是对于比较复杂的项目,适当的注释还是非常必要的。)

HTML风格守则

doctype

对于所有的HTML文档,都推荐使用HTML5的doctype:<!DOCTYPE html>。另外,建议使用HTML语法,而不是XHTML。对于空元素不用关闭,如<br>,无需写成<br />

【注:HTML5正在一步步逼近,看来以前认真记住的那些XHTML规范又需要逐渐抛弃掉了啊!】

HTML代码有效性

尽量书写合法的HTML代码,除非你是为了减小HTML文件体积。使用W3C HTML validator来校验代码。保证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>

语义化

要根据HTML各个元素的用途来选用标签,例如,标题使用h1-h6,段落使用p,链接使用a,等等。这一点也很重要,涉及到可访问性、重用以及代码效率的问题。

<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 -->
<a href="recommendations/">All recommendations</a>

使用替代文本

对于图片尽量提供alt属性值,让那些使用屏幕阅读器的盲人用户也能更好地浏览网页。如果图片数量过多造成负担,或者图片只是在样式渲染之前起一个临时作用,那么可以写成alt=""

<!-- 不推荐 -->
<img src="spreadsheet.png">
<!-- 推荐 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

结构、表现和行为分离

严格地将结构(标签)、表现(样式表)和行为(脚本)三者分离开来,也就是确保HTML中只包含结构性的内容,避免使用一些表现层面的标签,把表现性的东西丢进样式表文件,行为部分丢进脚本文件。而且,也要尽量减少外部样式表和脚本文件的数量。

这一点非常重要,否则后期维护的成本会很大。

<!-- 不推荐 -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="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>
<!-- 推荐 -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="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!

实体引用

不要使用实体引用,如&mdash;&rdquo;&#x263a;,当然前提是要保证团队内的编码格式统一。

可以使用实体的情况有下面几种:对于在HTML中具有特殊意义的字符(如<&),控制字符,和不可见的字符如&nbsp;(no-break space)。

<!-- 不推荐 -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
<!-- 推荐 -->
The currency symbol for the Euro is “€”.

省略可选的标签(本条守则也是可选的)

出于减小文件体积等目的,HTML5规范规定了一些可以省略的标签。

(这一点可能需要更多的时间去适应,因为目前的众多开发者都还不习惯这么做。但是出于一致性和简洁性的原因,把可选标签全都省略掉是最好的做法。)

<!-- 不推荐 -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>
<!-- 推荐 -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

type属性

省略样式表文件和脚本文件的type属性,除非使用的不是CSS(比如LESS)或者不是JavaScript。在HTML5中text/csstext/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格式化守则

通用格式化

每一个块、列表或者表格都另起新行,并且对它们的每一个子元素都使用缩进。

(如果不想让列表项之间出现空文本节点,可以把所有的li放在一行。)

<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>

HTML引号

HTML属性值一律使用双引号(""),而不是单引号('')。

<!-- 不推荐 -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- 推荐 -->
<a class="maia-button maia-button-secondary">Sign in</a>

CSS风格守则

CSS代码有效性

尽量确保CSS代码合法,除非要使用一些浏览器私有属性。用W3C CSS validator来校验代码。

ID和class命名

使用有意义的ID名和类名,尽量使名字能够体现出元素的功能,取最容易理解的命名,不要使用表现层面的命名。

/* 不推荐: 无意义的名字 */
#yee-1901 {}

/* 不推荐: 表现层的名字 */
.button-green {}
.clear {}
/* 推荐: 意义明确 */
#gallery {}
#login {}
.video {}

ID和class命名风格

ID和class的命名应当尽量短,在简洁的同时要能够表达出应有的意思。

/* 不推荐 */
#navigation {}
.atr {}
/* 推荐 */
#nav {}
.author {}

类型选择器

在ID和类名前面不要再加标签名,除非是出于优先级等其他原因。这对性能提升是很有用的。

/* 不推荐 */
ul#example {}
div.error {}
/* 不推荐 */
#example {}
.error {}

属性简写

尽量使用简写的属性(例如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的单位

0值的后面不要跟单位,除非必需。

margin: 0;
padding: 0;

开头的0

对于-1到1之间的值,可以省略开头的0。

font-size: .8em;

颜色值

对于可缩写的颜色值,尽量使用三个字符来表示,更简洁。

/* 不推荐 */
color: #eebbcc;
/* 推荐 */
color: #ebc;

前缀

给选择器加上一个所属模块的前缀,中间用连词符连接。不一定非要这样做,但在一些大的项目中,这样可以有效避免命名冲突的问题。

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

ID名和类名的分隔符

不要用除了连词符以外的字符来分隔类名,这样能够提高可读性。

/* 不推荐: 没有分隔“demo”和“image” */
.demoimage {}

/* 不推荐: 用的是下划线 */
.error_status {}
/* 推荐 */
#video-id {}
.ads-sample {}

CSS hacks

不要探测UA,也不要使用CSS hack,先尝试用其他的办法解决。UA探测和hack应该作为最后的手段,它们会影响代码效率和可维护性。遇到问题就想到使用hack是一种不好的思路。

CSS格式化守则

书写顺序

按照首字母顺序来排列CSS规则,方便维护。排列时可以不考虑私有属性前缀,但-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;
}
/* 推荐 */
h3 {
  font-weight: bold;
}

选择器和规则分隔

对选择器和每条规则都使用新行来分隔。

/* 不推荐 */
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%;
}

CSS引号

在属性选择器和属性值中都用单引号。URI值(url())中不要用引号。

例外:对于@charset,应该使用双引号(单引号是无效的)。

/* 不推荐 */
@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 {}

修订版本:2.19。

还没有评论,沙发空缺中……
flight