CSS Coding Style

本文档定义了HTML和CSS的格式和样式规则，旨在改善协作编码，代码质量和规范基本结构。它适用于使用HTML和CSS的源代码文件。主要参考了Google HTML/CSS Style Guide。

通用样式规则

协议

省略嵌入资源的协议：对于图像、媒体文件、样式表、脚本文件等，除非该资源请求无法对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

<meta charset="utf-8">

注释

根据需要，在可能的情况下给代码做注释：这块实现了什么功能，它的目的是什么，为什么这种方案更好？（注释代码不是强制要求，视乎项目性质和复杂程度）

待办事项

使用”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，首选：推荐使用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 &ldquo;&eur;&rdquo;.
<!-- 推荐 -->
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的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。

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的情况下请省略单位，除非被要求加上。

margin: 0;
padding: 0;

小数点前的0

小数点前的0请省略。

font-size: .8em;

URL中的引号

URL中的引号（”"或”）请省略。

@import url(//www.google.com/css/go.css);

十六进制

可以的情况下用3个字符来表达6个十六进制字符的信息。

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

前缀

对ID和class使用带前缀的命名（短破折号连接），在大型项目中，可以防止命名冲突，配合查找快速定位，便于维护。

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

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

borishuai / html-css-coding-style Goto Github PK

html-css-coding-style's Introduction