前言
本文档定义了HTML和CSS的格式和样式规则,旨在改善协作编码,代码质量和规范基本结构。它适用于使用HTML和CSS的源代码文件,也包括全局文件。该工具免费用于混淆、压缩和编译代码,同时保持通用代码质量。
通用样式规则
协议
省略嵌入资源的协议:对于图像、媒体文件、样式表、脚本文件等,除非该资源请求无法对http:和https:同时可用,否则省略协议部分。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);
}
通用格式化规则
缩进
使用2个空格,而不使用tab或者混用空格+tab作为缩进
<ul>
<li>Fantastic
<li>Great
</ul>
.example {
color: blue;
}
大小写
所有代码只使用小写:适用于元素名,选择器,(样式和标签的)属性及属性值(text/CDATA例外,作为内容时例外)
<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png" alt="Google">
尾随空格
一行中尾随的空格是多余的,可能会引起代码混乱
<!-- 不推荐 -->
<p>What?_
<!-- 推荐 -->
<p>Yes please.
通用Meta规则
编码
使用UTF-8(非BOM),在HTML中指定UTF-8编码,在CSS中则不需要特别指定因为默认就是UTF-8,更多编码和指定方式的资料可以参见Character Sets & Encodings in XHTML, HTML and CSS
注释
根据需要,在可能的情况下给代码做注释:这块实现了什么功能,它的目的是什么,为什么这种方案更好?(注释代码不是强制要求,视乎项目性质和复杂程度)
待办事项
使用”TODO”关键字高亮标识待办事项,而不用其他格式比如”@@”;使用”TODO(contact)”的形式附上联系方式(名称和邮件列表)方便联系;在冒号后加入待办事项的内容
{# TODO(john.doe): revisit centering #}
<center>Test</center>
<!-- TODO: remove optional tags -->
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
HTML代码规则
文档类型
使用HTML5,首选<!DOCTYPE html>:推荐使用HTML(text/html)而非XHTML(application/xhtml+xml),原因一是浏览器基础支持缺失,二是优化空间比HTML更小
HTML合法性
使用合法的HTML标签,除非你更在意那一点点节省的文件体积;使用工具如W3C 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>
语义化
符合本义地使用元素(标签),比如在头部区域使用heading元素,使用p元素表示段落,使用a元素表示链接等;语义化地使用HTML有助于网页的可访问性,复用性,和优化代码效率。
<!-- 不推荐d -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 -->
<a href="recommendations/">All recommendations</a>
多媒体备选内容
为多媒体元素(图像、视频音频、cavas创建的动态对象)提供替代内容,对图像来说可以在alt中加上有意义的文本内容,对视频音频来说可以加上描述性的元素。提供多媒体的替代内容在网页可访问性上是重要的:一个盲人用户可以通过alt线索得知关于这个图像的信息,或者其他用户在无法理解图像内容的时候有用。对于不是在css中引用的非内容图就不要使用alt描述了。
<!-- 不推荐 -->
<img src="spreadsheet.png">
<!-- 推荐 -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">
行为、呈现与结构分离
保持结构(标记)、呈现(样式)、和行为(脚本)严格分离,并最小化三者的相互作用。HTML文件中只包含结构代码,样式语句放在样式表文件中,行为语句放在脚本文件中,在HTML文档中去引用样式表和脚本文件。分离的重要性在于,如果你要在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>
<!-- 推荐 -->
<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!
转义符
在普通的符号比如 — ” 或者 ☺ 上没必要使用转义符,而对于 > < & 和 (空格)则推荐用转义符,可以避免与HTML中标签混淆
<!-- 不推荐 -->
The currency symbol for the Euro is “&eur;”.
<!-- 推荐 -->
The currency symbol for the Euro is “€”.
可选标签
省略可选的标签:为了代码文件的可读性和体积的优化,可以考虑省略可选的标签。HTML5 specification定义了哪些标签是可以被省略的。(由于网站开发人员的技术背景差异,应用这种方法需要一段足够的缓冲期;基于一致性和简单的原则,最好是省略所有的可选标签,而不只是一两个。
<!-- 不推荐 -->
<!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.
引用类型
省略样式表和脚本文件的引用类型,(除非你引用的不是CSS或者JavaScript)。HTML5默认使用text/css和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格式化规则
通用格式化
为下一个block元素、list元素或者table元素使用另起一行,并缩进此类的每个子元素。如果因为list元素中的空格占位问题而把list元素放置在同一行中也是可以接受的,对此语法检查器应该警告而不是提示错误。
<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代码规则
CSS验证
尽量使用CSS验证,除非因为修正浏览器解析差异而编写私有属性,否则都应该使用合法的CSS代码。可以使用W3C CSS validator测试你的CSS。使用合法的CSS同样是一个可被衡量的规则,它能标记出那些不起作用和可被删除的代码,并确保CSS的正确使用。
ID和class命名
使用有意义的或通用的ID和class命名: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与单位
属性值为0的情况下请省略单位,除非被要求加上。
小数点前的0
小数点前的0请省略。
URL中的引号
URL中的引号(”"或”)请省略。
@import url(//www.google.com/css/go.css);
十六进制
可以的情况下用3个字符来表达6个十六进制字符的信息。
/* 不推荐 */
color: #eebbcc;
/* 推荐 */
color: #ebc;
前缀
对ID和class使用带前缀的命名(短破折号连接),在大型项目中,可以防止命名冲突,配合查找快速定位,便于维护。
.adw-help {} /* AdWords */
#maia-note {} /* Maia */
分隔符
对ID和class使用分隔符连接单词(分隔符只能有一种,如果你选择了短破折号就不要再用下划线或者其他连字符)以便于理解和扫描。
/* 不推荐: 没有分离单词demo和image */
.demoimage {}
/* 不推荐: 应使用短破折号 */
.error_status {}
/* 推荐 */
#video-id {}
.ads-sample {}
Hacks
请不用动不动就使用浏览器检测和CSS Hacks,先试试别的解决方法吧!考虑到代码高效率和易管理,虽然这两种方法能快速解决浏览器解析差异,但应被视为最后的手段。在长期的项目中,允许使用hack只会带来更多的hack,你越是使用它,你越是会依赖它!
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的Meta规则
区块注释
对一个代码区块注释(可选),将样式语句分区块并在新行中对其注释。
/* Header */
#adw-header {}
/* Footer */
#adw-footer {}
/* Gallery */
.adw-gallery {}
结语
如果你正在编辑一份代码,不妨花几分钟时间审视一下你周围代码的风格,把你的代码风格与它们保持一致。
有一份共同的代码风格指引,可以使代码阅读者专注于你代码的内容而不是你怎样组织你的代码。我们在这里向人们公布我们的全局代码风格规则,但其实局部代码风格也是很重要的。如果你添加到文件里的代码看起来与周围的代码风格大相径庭,会使下一个阅读者无所适从,请避免这种情况!