<!DOCTYPE html>
<!-- saved from url=(0046)http://codeguide.bootcss.com/#css-organization -->
<html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<link href="http://codeguide.bootcss.com/public/ico/favicon.ico" rel="shortcut icon" type="image/x-icon">
<title>
编码规范 by @mdo
</title>
<link rel="stylesheet" href="http://codeguide.bootcss.com/code-guide.css">
</head>
<body>
<header class="masthead">
<div class="container">
<span class="icon">✍</span>
<h1>编码规范 by @mdo</h1>
<p class="lead">编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p>
<p class="masthead-links">
<a href="https://github.com/mdo/code-guide">
<span class="icon icon-github-circled"></span>
</a>
<a href="https://twitter.com/mdo">
<span class="icon icon-twitter"></span>
</a>
</p>
</div>
</header>
<div class="heading" id="toc">
<h2>目录</h2>
</div>
<div class="section toc">
<div class="col">
<h4><a href="http://codeguide.bootcss.com/#html">HTML</a></h4>
<ul>
<li><a href="http://codeguide.bootcss.com/#html-syntax">语法</a></li>
<li><a href="http://codeguide.bootcss.com/#html-doctype">HTML5 doctype</a></li>
<li><a href="http://codeguide.bootcss.com/#html-lang">语言属性（Language attribute）</a></li>
<li><a href="http://codeguide.bootcss.com/#html-encoding">字符编码</a></li>
<li><a href="http://codeguide.bootcss.com/#html-ie-compatibility-mode">IE 兼容模式</a></li>
<li><a href="http://codeguide.bootcss.com/#html-style-script">引入 CSS 和 JavaScript 文件</a></li>
<li><a href="http://codeguide.bootcss.com/#html-practicality">实用为王</a></li>
<li><a href="http://codeguide.bootcss.com/#html-attribute-order">属性顺序</a></li>
<li><a href="http://codeguide.bootcss.com/#html-boolean-attributes">布尔（boolean）型属性</a></li>
<li><a href="http://codeguide.bootcss.com/#html-reducing-markup">减少标签的数量</a></li>
<li><a href="http://codeguide.bootcss.com/#html-javascript">JavaScript 生成的标签</a></li>
</ul>
</div>
<div class="col">
<h4><a href="http://codeguide.bootcss.com/#css">CSS</a></h4>
<ul>
<li><a href="http://codeguide.bootcss.com/#css-syntax">语法</a></li>
<li><a href="http://codeguide.bootcss.com/#css-declaration-order">声明顺序</a></li>
<li><a href="http://codeguide.bootcss.com/#css-media-queries">媒体查询（Media query）的位置</a></li>
<li><a href="http://codeguide.bootcss.com/#css-prefixed-properties">带前缀的属性</a></li>
<li><a href="http://codeguide.bootcss.com/#css-single-declarations">单行规则声明</a></li>
<li><a href="http://codeguide.bootcss.com/#css-shorthand">简写形式的属性声明</a></li>
<li><a href="http://codeguide.bootcss.com/#css-nesting">Less 和 Sass 中的嵌套</a></li>
<li><a href="http://codeguide.bootcss.com/#css-comments">注释</a></li>
<li><a href="http://codeguide.bootcss.com/#css-classes">class 命名</a></li>
<li><a href="http://codeguide.bootcss.com/#css-selectors">选择器</a></li>
<li><a href="./编码规范 by @mdo_files/编码规范 by @mdo.htm">代码组织</a></li>
</ul>
</div>
</div>
<div class="section" id="golden-rule">
<div class="col">
<h2>黄金定律</h2>
<p>永远遵循同一套编码规范 -- 可以是这里列出的，也可以是你自己总结的。如果你发现本规范中有任何错误，敬请指正。通过 <a href="https://github.com/mdo/code-guide/issues/new">open an issue on GitHub</a>为本规范添加或贡献内容。</p>
</div>
<div class="col">
<blockquote>
<p>不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。</p>
</blockquote>
</div>
</div>
<div class="heading" id="html">
<h2>HTML</h2>
</div>
<div class="section" id="html-syntax">
<div class="col">
<h3>语法</h3>
<ul>
<li>用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。</li>
<li>嵌套元素应当缩进一次（即两个空格）。</li>
<li>对于属性的定义，确保全部使用双引号，绝不要使用单引号。</li>
<li>不要在自闭和（self-closing）元素的尾部添加斜线 -- <a href="http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag">HTML5 规范</a>中明确说明这是可选的。</li>
<li>不要省略可选的结束标签（closing tag）（例如，<code></li></code> 或 <code></body></code>）。</li>
</ul>
</div>
<div class="col">
<div class="highlight"><pre><code class="html"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>Page title<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><img</span> <span class="na">src=</span><span class="s">"images/company-logo.png"</span> <span class="na">alt=</span><span class="s">"Company"</span><span class="nt">></span>
<span class="nt"><h1</span> <span class="na">class=</span><span class="s">"hello-world"</span><span class="nt">></span>Hello, world!<span class="nt"></h1></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div>
</div>
</div>
<div class="section" id="html-doctype">
<div class="col">
<h3>HTML5 doctype</h3>
<p>为每个 HTML 页面的第一行添加标准模（standard mode）式的声明，这样能够确保在每个浏览器中拥有一致的展现。</p>
</div>
<div class="col">
<div class="highlight"><pre><code class="html"><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"></head></span>
<span class="nt"></html></span>
</code></pre></div>
</div>
</div>
<div class="section" id="html-lang">
<div class="col">
<h3>语言属性</h3>
<p>根据 HTML5 规范：</p>
<blockquote>
<p>强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。</p>
</blockquote>
<p>更多关于 <code>lang</code> 属性的知识可以从 <a href="http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-html-element">此规范</a> 中了解。</p>
<p>这里列出了<a href="http://reference.sitepoint.com/html/lang-codes">语言代码表</a>。</p>
</div>
<div class="col">
<div class="highlight"><pre><code class="html"><span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en-us"</span><span class="nt">></span>
<span class="c"><!-- ... --></span>
<span class="nt"></html></span>
</code></pre></div>
</div>
</div>
<div class="section" id="html-ie-compatibility-mode">
<div class="col">
<h3>IE 兼容模式</h3>
<p>IE 支持通过特定的 <code><meta></code> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 <strong>edge mode</strong>，从而通知 IE 采用其所支持的最新的模式。</p>
<p><a href="http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e">阅读这篇 stack overflow 上的文章</a>可以获得更多有用的信息。</p>
</div>
<div class="col">
<div class="highli
