您的位置：首页 > Web前端 > HTML5

前端代码规则（html5）

2013-12-16 11:38 169 查看

前言

本文档定义了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">


尾随空格

一行中尾随的空格是多余的，可能会引起代码混乱

4000
<!-- 不推荐 -->
<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，首选<!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!


转义符
14024

在普通的符号比如 — ” 或者 ☺ 上没必要使用转义符，而对于 > < & 和  （空格）则推荐用转义符，可以避免与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的情况下请省略单位，除非被要求加上。

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


分隔符

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


结语

如果你正在编辑一份代码，不妨花几分钟时间审视一下你周围代码的风格，把你的代码风格与它们保持一致。

有一份共同的代码风格指引，可以使代码阅读者专注于你代码的内容而不是你怎样组织你的代码。我们在这里向人们公布我们的全局代码风格规则，但其实局部代码风格也是很重要的。如果你添加到文件里的代码看起来与周围的代码风格大相径庭，会使下一个阅读者无所适从，请避免这种情况！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航