前端开发规范

     这是一份旨在增强团队的开发协作，提高代码质量和打造开发基石的编码风格规范，其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分。我们知道，当一个团队开始指定并实行编码规范的话，错误就会变得更加显而易见。如果一段特定的代码不符合规范的话，它有可能只是代码风格错误，而也有可能会是 bug。早期指定规范就使得代码审核得以更好的开展，并且可以更精确的地定位到错误。只要开发者们能够保证源代码源文件都严格遵循规范，那接下去所使用的混淆、压缩和编译工具则可投其所好不尽相同。

一、一般规范

以下章节列举了一些可应用在 HTML, JavaScript 和 CSS/SCSS 上的通用规则。

二、文件/资源命名

在 web 项目中，所有的文件名应该都遵循同一命名约定。以可读性而言，减号（-）是用来分隔文件名的不二之选。同时它也是常见的 URL 分隔符（i.e. //example.com/blog/my-blog-entry or //s.example.com/images/big-black-background.jpg），所以理所当然的，减号应该也是用来分隔资源名称的好选择。

请确保文件命名总是以字母开头而不是数字。而以特殊字符开头命名的文件，一般都有特殊的含义与用处（比如 compass[1] 中的下划线就是用来标记跳过直接编译的文件用的）。

资源的字母名称必须全为小写，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。

还有一些情况下，需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），抑或一串前缀（比如 3fa89b.main.min.css）。这种情况下，建议使用点分隔符来区分这些在文件名中带有清晰意义的元数据。

不推荐

html 代码:
    MyScript.js
    myCamelCaseName.css
    i_love_underscores.html
    1001-scripts.js
    my-file-min.css

推荐

html 代码:
    my-script.js
    my-camel-case-name.css
    i-love-underscores.html
    thousand-and-one-scripts.js
    my-file.min.css

协议

不要指定引入资源所带的具体协议。

当引入图片或其他媒体文件，还有样式和脚本时，URLs 所指向的具体路径，不要指定协议部分（http:, https:），除非这两者协议都不可用。

不指定协议使得 URL 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。

不推荐

html 代码:
<script src="http://cdn.com/foundation.min.js"></script>

推荐

html 代码:
<script src="//cdn.com/foundation.min.js"></script>

不推荐

css 代码:
    .example {
    background: url(http://static.example.com/images/bg.jpg);
    }

推荐

css 代码:
example {
background: url(//static.example.com/images/bg.jpg);
}

文本缩进

一次缩进两个空格。

html 代码:
    <ul>
    <li>Fantastic</li>
    <li>Great</li>
    <li>
    <a href="#">Test</a>
    </li>
    </ul>
css 代码:
    @media screen and (min-width: 1100px) {
    body {
    font-size: 100%;
    }
    }
js 代码:
    (function(){
    var x = 10;
     
    function y(a, b) {
    return {
    result: (a + b) * x
    }
     
    }
    }());

注释

注释是你自己与你的小伙伴们了解代码写法和目的的唯一途径。特别是在写一些看似琐碎的无关紧要的代码时，由于记忆点不深刻，注释就变得尤为重要了。

编写自解释代码只是一个传说，没有任何代码是可以完全自解释的。而代码注释，则是永远也不嫌多。

当你写注释时一定要注意：不要写你的代码都干了些什么，而要写你的代码为什么要这么写，背后的考量是什么。当然也可以加入所思考问题或是解决方案的链接地址。

不推荐

js 代码:
    var offset = 0;
     
    if(includeLabels) {
    // Add offset of 20
    offset = 20;
    }

推荐

js 代码:
    var offset = 0;
     
    if(includeLabels) {
    // If the labels are included we need to have a minimum offset of 20 pixels
    // We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1
    offset = 20;
    }

三、HTML 规范

文档类型

推荐使用 HTML5 的文档类型申明： <!DOCTYPE html>.

（建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限）。

HTML 中最好不要将无内容元素[1] 的标签闭合，例如：使用 <br> 而非 <br />.

HTML 验证

一般情况下，建议使用能通过标准规范验证的 HTML 代码，除非在性能优化和控制文件大小上不得不做出让步。

使用诸如 W3C HTML validator 这样的工具来进行检测。

规范化的 HTML 是显现技术要求与局限的显著质量基线，它促进了 HTML 被更好地运用。

不推荐

html 代码：
    <title>Test</title>
    <article>This is only a test.

推荐

html 代码:
    <!DOCTYPE html>
    <meta charset="utf-8">
    <title>Test</title>
    <article>This is only a test.</article>

省略可选标签

HTML5 规范中规定了 HTML 标签是可以省略的。但从可读性来说，在开发的源文件中最好不要这样做，因为省略标签可能会导致一些问题。

省略一些可选的标签确实使得页面大小减少，这很有用，尤其是对于一些大型网站来说。为了达到这一目的，我们可以在开发后期对页面进行压缩处理，在这个环节中这些可选的标签完全就可以省略掉了。

脚本加载

出于性能考虑，脚本异步加载很关键。一段脚本放置在 <head> 内，比如 <script src="main.js"></script>，其加载会一直阻塞 DOM 解析，直至它完全地加载和执行完毕。这会造成页面显示的延迟。特别是一些重量级的脚本，对用户体验来说那真是一个巨大的影响。

异步加载脚本可缓解这种性能影响。如果只需兼容 IE10+，可将 HTML5 的 async 属性加至脚本中，它可防止阻塞 DOM 的解析，甚至你可以将脚本引用写在 <head> 里也没有影响。

如需兼容老旧的浏览器，实践表明可使用用来动态注入脚本的脚本加载器。你可以考虑 yepnope 或 labjs。注入脚本的一个问题是：一直要等到 CSS 对象文档已就绪，它们才开始加载（短暂地在 CSS 加载完毕之后），这就对需要及时触发的 JS 造成了一定的延迟，这多多少少也影响了用户体验吧。

终上所述，兼容老旧浏览器(IE9-)时，应该遵循以下最佳实践。

脚本引用写在 body 结束标签之前，并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本，但它只阻塞了 body 结束标签之前的 DOM 解析，这就大大降低了其阻塞影响。而在现代浏览器中，脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载，此时加载属于异步加载，不会阻塞 CSSOM（但其执行仍发生在 CSSOM 之后）。

所有浏览器中，推荐

js 代码:
    <html>
    <head>
    <link rel="stylesheet" href="main.css">
    </head>
    <body>
    <!-- body goes here -->
     
    <script src="main.js" async></script>
    </body>
    </html>

只在现代浏览器中，推荐

html 代码:
    <html>
    <head>
    <link rel="stylesheet" href="main.css">
    <script src="main.js" async></script>
    </head>
    <body>
    <!-- body goes here -->
    </body>
    </html>

语义化

根据元素（有时被错误地称作“标签”）其被创造出来时的初始意义来使用它。打个比方，用 heading 元素来定义头部标题，p 元素来定义文字段落，用 a 元素来定义链接锚点，等等。

有根据有目的地使用 HTML 元素，对于可访问性、代码重用、代码效率来说意义重大。

以下示例列出了一些的语义化 HTML 主要情况：

不推荐

html 代码:
    <b>My page title</b>
    <div class="top-navigation">
    <div class="nav-item"><a href="#home">Home</a></div>
    <div class="nav-item"><a href="#news">News</a></div>
    <div class="nav-item"><a href="#about">About</a></div>
    </div>
     
    <div class="news-page">
    <div class="page-section news">
    <div class="title">All news articles</div>
    <div class="news-article">
    <h2>Bad article</h2>
    <div class="intro">Introduction sub-title</div>
    <div class="content">This is a very bad example for HTML semantics</div>
    <div class="article-side-notes">I think I'm more on the side and should not receive the main credits</div>
    <div class="article-foot-notes">
    This article was created by David <div class="time">2014-01-01 00:00</div>
    </div>
    </div>
     
    <div class="section-footer">
    Related sections: Events, Public holidays
    </div>
    </div>
    </div>
     
    <div class="page-footer">
    Copyright 2014
    </div>

推荐

html 代码:
    <!-- The page header should go into a header element -->
    <header>
    <!-- As this title belongs to the page structure it's a heading and h1 should be used -->
    <h1>My page title</h1>
    </header>
     
    <!-- All navigation should go into a nav element -->
    <nav class="top-navigation">
    <!-- A listing of elements should always go to UL (OL for ordered listings) -->
    <ul>
    <li class="nav-item"><a href="#home">Home</a></li>
    <li class="nav-item"><a href="#news">News</a></li>
    <li class="nav-item"><a href="#about">About</a></li>
    </ul>
    </nav>
     
    <!-- The main part of the page should go into a main element (also use role="main" for accessibility) -->
    <main class="news-page" role="main">
    <!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. -->
    <section class="page-section news">
    <!-- A section header should go into a section element -->
    <header>
    <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) -->
    <h2 class="title">All news articles</h2>
    </header>
     
    <!-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other
    re-usable module / section that can occur multiple times on a page) a article element should be used -->
    <article class="news-article">
    <!-- An article can contain a header that contains the summary / introduction information of the article -->
    <header>
    <!-- As a article title does not belong to the overall page structure there should not be any heading tag! -->
    <div class="article-title">Good article</div>
    <!-- Small can optionally be used to reduce importance -->
    <small class="intro">Introduction sub-title</small>
    </header>
     
    <!-- For the main content in a section or article there is no semantic element -->
    <div class="content">
    <p>This is a good example for HTML semantics</p>
    </div>
    <!-- For content that is represented as side note or less important information in a given context use aside -->
    <aside class="article-side-notes">
    <p>I think I'm more on the side and should not receive the main credits</p>
    </aside>
    <!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element -->
    <footer class="article-foot-notes">
    <!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time
    while the actual text in the time element can also be more human readable / relative -->
    <p>This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time></p>
    </footer>
    </article>
     
    <!-- In a section, footnotes or similar information can also go into a footer element -->
    <footer class="section-footer">
    <p>Related sections: Events, Public holidays</p>
    </footer>
    </section>
    </main>
     
    <!-- Your page footer should go into a global footer element -->
    <footer class="page-footer">
    Copyright 2014
    </footer>

多媒体回溯

对页面上的媒体而言，像图片、视频、canvas 动画等，要确保其有可替代的接入接口。图片文件我们可采用有意义的备选文本（alt），视频和音频文件我们可以为其加上说明文字或字幕。

提供可替代内容对可用性来说十分重要。试想，一位盲人用户如何能知晓一张图片是什么，要是没有 @alt 的话。

（图片的 alt 属性是可不填写内容的，纯装饰性的图片就可用这么做：alt=""）。

不推荐

html 代码:
<img src="luke-skywalker.jpg">

推荐

html 代码:
<img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse">

尽量用 alt 标签去描述图片，设想你需要对于那些只能通过语音或者看不见图片的用户表达图片到底是什么。

不推荐

html 代码:
<img src="huge-spaceship-approaching-earth.jpg" alt="Header image">

推荐

html 代码:
<img src="huge-spaceship-approaching-earth.jpg" alt="A huge spaceship that is approaching the earth">

关注点分离

理解 web 中如何和为何区分不同的关注点，这很重要。这里的关注点主要指的是：信息（HTML 结构）、外观（CSS）和行为（JavaScript）。为了使它们成为可维护的干净整洁的代码，我们要尽可能的将它们分离开来。

严格地保证结构、表现、行为三者分离，并尽量使三者之间没有太多的交互和联系。

就是说，尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。

在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。

清晰的分层意味着：

  • 不使用超过一到两张样式表（i.e. main.css, vendor.css）
  • 不使用超过一到两个脚本（学会用合并脚本）
  • 不使用行内样式（<style>.no-good {}</style>）
  • 不在元素上使用 style 属性（<hr style="border-top: 5px solid black">）
  • 不使用行内脚本（<script>alert('no good')</script>）
  • 不使用表象元素（i.e. <b>, <u>, <center>, <font>, <b>）
  • 不使用表象 class 名（i.e. red, left, center）

不推荐

html 代码:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="grid.css">
    <link rel="stylesheet" href="type.css">
    <link rel="stylesheet" href="modules/teaser.css">
    </head>
    <body>
    <h1 style="font-size: 3rem"></h1>
    <b>I'm a subtitle and I'm bold!</b>
    <center>Dare you center me!</center>
    <script>
    alert('Just dont...');
    </script>
    <div class="red">I'm important!</div>
    </body>
    </html>

推荐

html 代码:
    <!DOCTYPE html>
    <html>
    <head>
    <!-- Concatinate your style sheets into a single one -->
    <link rel="stylesheet" href="main.css">
    </head>
    <body>
    <!-- Don't use style attributes but assign sensible classes and apply styles in the stylesheet -->
    <h1 class="title"></h1>
    <!-- Don't use presentational elements and assign sensible classes -->
    <div class="sub-title">I'm a subtitle and I'm bold!</div>
    <!-- Maybe your comments get centered in your presentation but that decision is up to the stylesheet -->
    <span class="comment">Dare you center me!</span>
    <!-- You wanted to make it red because it's important so then also name the class important and decide in the stylesheet
    what you want to do with it -->
    <div class="important">I'm important!</div>
     
    <!-- Put all your scripts into files and concatinate them into a single one -->
    <script async src="main.js"></script>
    </body>
    </html>

HTML 内容至上

不要让非内容信息污染了你的 HTML。现在貌似有一种倾向：通过 HTML 来解决设计问题，这是显然是不对的。HTML 就应该只关注内容。

HTML 标签的目的，就是为了不断地展示内容信息。

  • 不要引入一些特定的 HTML 结构来解决一些视觉设计问题
  • 不要将 img 元素当做专门用来做视觉设计的元素

以下例子展示了误将 HTML 用来解决设计问题的这两种情况：

不推荐

html 代码:
    <!-- We should not introduce an additional element just to solve a design problem -->
    <span class="text-box">
    <span class="square"></span>
    See the square next to me?
    </span>
css 代码:
    .text-box > .square {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: red;
    }

推荐

html 代码:
    <!-- That's clean markup! -->
    <span class="text-box">
    See the square next to me?
    </span>
css 代码:
    /* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
    .text-box:before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: red;
    }

图片和 SVG 图形能被引入到 HTML 中的唯一理由是它们呈现出了与内容相关的一些信息。

不推荐

html 代码:
    <!-- Content images should never be used for design elements! -->
    <span class="text-box">
    <img src="square.svg" alt="Square" />
    See the square next to me?
    </span>

推荐

html 代码:
    <!-- That's clean markup! -->
    <span class="text-box">
    See the square next to me?
    </span>
css 代码:
    /* We use a :before pseudo element with a background image to solve the problem */
    .text-box:before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url(square.svg) no-repeat;
    background-size: 100%;
    }

Type 属性

省略样式表与脚本上的 type 属性。鉴于 HTML5 中以上两者默认的 type 值就是 text/css 和 text/javascript，所以 type 属性一般是可以忽略掉的。甚至在老旧版本的浏览器中这么做也是安全可靠的。

不推荐

html 代码:
    <link rel="stylesheet" href="main.css" type="text/css">
    <script src="main.js" type="text/javascript"></script>

推荐

html 代码:
    <link rel="stylesheet" href="main.css">
    <script src="main.js"></script>

HTML 引号

使用双引号(“”) 而不是单引号(”) 。

不推荐

html 代码:
<div class='news-article'></div>

推荐

html 代码:
<div class="news-article"></div>

三、JavaScript 规范

全局命名空间污染与 IIFE

总是将代码包裹成一个 IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。

IIFE 还可确保你的代码不会轻易被其它全局命名空间里的代码所修改（i.e. 第三方库，window 引用，被覆盖的未定义的关键字等等）。

不推荐

js 代码:
    var x = 10,
    y = 100;
     
    // Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
    // will be stored in the window object. This is very unclean and needs to be avoided.
    console.log(window.x + ' ' + window.y);

推荐

js 代码:
    // We declare a IIFE and pass parameters into the function that we will use from the global space
    (function(log, w, undefined){
    'use strict';
     
    var x = 10,
    y = 100;
     
    // Will output 'true true'
    log((w.x === undefined) + ' ' + (w.y === undefined));
     
    }(window.console.log, window));

IIFE（立即执行的函数表达式）

无论何时，想要创建一个新的封闭的定义域，那就用 IIFE。它不仅避免了干扰，也使得内存在执行完后立即释放。

所有脚本文件建议都从 IIFE 开始。

立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的，但写在内使得整个表达式看起来更像一个整体，因此推荐这么做。

不推荐

js 代码：
(function(){})();

推荐

js 代码:
(function(){}());

so，用下列写法来格式化你的 IIFE 代码：

js 代码:
    (function(){
    'use strict';
     
    // Code goes here
     
    }());

如果你想引用全局变量或者是外层 IIFE 的变量，可以通过下列方式传参：

js 代码:
    (function($, w, d){
    'use strict';
     
    $(function() {
    w.alert(d.querySelectorAll('div').length);
    });
    }(jQuery, window, document));

严格模式

ECMAScript 5 严格模式可在整个脚本或独个方法内被激活。它对应不同的 javascript 语境会做更加严格的错误检查。严格模式也确保了 javascript 代码更加的健壮，运行的也更加快速。

严格模式会阻止使用在未来很可能被引入的预留关键字。

你应该在你的脚本中启用严格模式，最好是在独立的 IIFE 中应用它。避免在你的脚本第一行使用它而导致你的所有脚本都启动了严格模式，这有可能会引发一些第三方类库的问题。

不推荐

js 代码:
    // Script starts here
    'use strict';
     
    (function(){
     
    // Your code starts here
     
    }());

推荐

js 代码:
    (function(){
    'use strict';
     
    // Your code starts here
     
    }());

变量声明

总是使用 var 来声明变量。如不指定 var，变量将被隐式地声明为全局变量，这将对变量难以控制。如果没有声明，变量处于什么定义域就变得不清（可以是在 Document 或 Window 中，也可以很容易地进入本地定义域）。所以，请总是使用 var 来声明变量。

采用严格模式带来的好处是，当你手误输入错误的变量名时，它可以通过报错信息来帮助你定位错误出处。

不推荐

js 代码:
    x = 10;
    y = 100;

推荐

js 代码:
    var x = 10,
    y = 100;

理解 JavaScript 的定义域和定义域提升

在 JavaScript 中变量和方法定义会自动提升到执行之前。JavaScript 只有 function 级的定义域，而无其他很多编程语言中的块定义域，所以使得你在某一 function 内的某语句和循环体中定义了一个变量，此变量可作用于整个 function 内，而不仅仅是在此语句或循环体中，因为它们的声明被 JavaScript 自动提升了。

我们通过例子来看清楚这到底是怎么一回事：

原 function

js 代码:
    (function(log){
    'use strict';
     
    var a = 10;
     
    for(var i = 0; i < a; i++) {
    var b = i * i;
    log(b);
    }
     
    if(a === 10) {
    var f = function() {
    log(a);
    };
    f();
    }
     
    function x() {
    log('Mr. X!');
    }
    x();
     
    }(window.console.log));

被 JS 提升过后

js 代码:
    (function(log){
    'use strict';
    // All variables used in the closure will be hoisted to the top of the function
    var a,
    i,
    b,
    f;
    // All functions in the closure will be hoisted to the top
    function x() {
    log('Mr. X!');
    }
     
    a = 10;
     
    for(i = 0; i < a; i++) {
    b = i * i;
    log(b);
    }
     
    if(a === 10) {
    // Function assignments will only result in hoisted variables but the function body will not be hoisted
    // Only by using a real function declaration the whole function will be hoisted with its body
    f = function() {
    log(a);
    };
    f();
    }
     
    x();
     
    }(window.console.log));

根据以上提升过程，你是否可理解以下代码？

有效代码

js 代码:
    (function(log){
    'use strict';
     
    var a = 10;
     
    i = 5;
     
    x();
     
    for(var i; i < a; i++) {
    log(b);
    var b = i * i;
    }
     
    if(a === 10) {
    f = function() {
    log(a);
    };
    f();
     
    var f;
    }
     
    function x() {
    log('Mr. X!');
    }
     
    }(window.console.log));

正如你所看到的这段令人充满困惑与误解的代码导致了出人意料的结果。只有良好的声明习惯，也就是下一章节我们要提到的声明规则，才能尽可能的避免这类错误风险。

提升声明

为避免上一章节所述的变量和方法定义被自动提升造成误解，把风险降到最低，我们应该手动地显示地去声明变量与方法。也就是说，所有的变量以及方法，应当定义在 function 内的首行。

只用一个 var 关键字声明，多个变量用逗号隔开。

不推荐

js 代码:
    (function(log){
    'use strict';
     
    var a = 10;
    var b = 10;
     
    for(var i = 0; i < 10; i++) {
    var c = a * b * i;
    }
     
    function f() {
     
    }
     
    var d = 100;
    var x = function() {
    return d * d;
    };
    log(x());
     
    }(window.console.log));

推荐

js 代码:
    (function(log){
    'use strict';
     
    var a = 10,
    b = 10,
    i,
    c,
    d,
    x;
     
    function f() {
     
    }
     
    for(i = 0; i < 10; i++) {
    c = a * b * i;
    }
     
     
     
    d = 100;
    x = function() {
    return d * d;
    };
    log(x());
     
    }(window.console.log));

把赋值尽量写在变量申明中。

不推荐

js 代码:
    var a,
    b,
    c;
     
    a = 10;
    b = 10;
    c = 100;

推荐

js 代码:
    var a = 10,
    b = 10,
    c = 100;

总是使用带类型判断的比较判断

总是使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。

如果你使用 === 操作符，那比较的双方必须是同一类型为前提的条件下才会有效。

在只使用 == 的情况下，JavaScript 所带来的强制类型转换使得判断结果跟踪变得复杂，下面的例子可以看出这样的结果有多怪了：

js 代码:
    (function(log){
    'use strict';
     
    log('0' == 0); // true
    log('' == false); // true
    log('1' == true); // true
    log(null == undefined); // true
     
    var x = {
    valueOf: function() {
    return 'X';
    }
    };
     
    log(x == 'X');
     
    }(window.console.log));

明智地使用真假判断

当我们在一个 if 条件语句中使用变量或表达式时，会做真假判断。if(a == true) 是不同于 if(a) 的。后者的判断比较特殊，我们称其为真假判断。这种判断会通过特殊的操作将其转换为 true 或 false，下列表达式统统返回 false：false, 0, undefined, null, NaN, ''（空字符串）.

这种真假判断在我们只求结果而不关心过程的情况下，非常的有帮助。

以下示例展示了真假判断是如何工作的：

js 代码:
    (function(log){
    'use strict';
     
    function logTruthyFalsy(expr) {
    if(expr) {
    log('truthy');
    } else {
    log('falsy');
    }
    }
     
    logTruthyFalsy(true); // truthy
    logTruthyFalsy(1); // truthy
    logTruthyFalsy({}); // truthy
    logTruthyFalsy([]); // truthy
    logTruthyFalsy('0'); // truthy
     
    logTruthyFalsy(false); // falsy
    logTruthyFalsy(0); // falsy
    logTruthyFalsy(undefined); // falsy
    logTruthyFalsy(null); // falsy
    logTruthyFalsy(NaN); // falsy
    logTruthyFalsy(''); // falsy
     
    }(window.console.log));

变量赋值时的逻辑操作

逻辑操作符 || 和 && 也可被用来返回布尔值。如果操作对象为非布尔对象，那每个表达式将会被自左向右地做真假判断。基于此操作，最终总有一个表达式被返回回来。这在变量赋值时，是可以用来简化你的代码的。

不推荐

js 代码:
    if(!x) {
    if(!y) {
    x = 1;
    } else {
    x = y;
    }
    }

推荐

js 代码:
x = x || y || 1;

这一小技巧经常用来给方法设定默认的参数。

js 代码:
    (function(log){
    'use strict';
     
    function multiply(a, b) {
    a = a || 1;
    b = b || 1;
     
    log('Result ' + a * b);
    }
     
    multiply(); // Result 1
    multiply(10); // Result 10
    multiply(3, NaN); // Result 3
    multiply(9, 5); // Result 45
     
    }(window.console.log));

分号

总是使用分号，因为隐式的代码嵌套会引发难以察觉的问题。当然我们更要从根本上来杜绝这些问题[1] 。以下几个示例展示了缺少分号的危害：

js 代码:
    // 1.
    MyClass.prototype.myMethod = function() {
    return 42;
    } // No semicolon here.
     
    (function() {
    // Some initialization code wrapped in a function to create a scope for locals.
    })();
     
     
    var x = {
    'i': 1,
    'j': 2
    } // No semicolon here.
     
    // 2. Trying to do one thing on Internet Explorer and another on Firefox.
    // I know you'd never write code like this, but throw me a bone.
    [ffVersion, ieVersion][isIE]();
     
     
    var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // No semicolon here.
     
    // 3. conditional execution a la bash
    -1 == resultOfOperation() || die();

So what happens?

  1. JavaScript 错误 —— 首先返回 42 的那个 function 被第二个 function 当中参数传入调用，接着数字 42 也被“调用”而导致出错。
  2. 八成你会得到 ‘no such property in undefined’ 的错误提示，因为在真实环境中的调用是这个样子：x[ffVersion, ieVersion][isIE]().
  3. die 总是被调用。因为数组减 1 的结果是 NaN，它不等于任何东西（无论 resultOfOperation 是否返回 NaN）。所以最终的结果是 die() 执行完所获得值将赋给 THINGS_TO_EAT.

Why?

JavaScript 中语句要以分号结束，否则它将会继续执行下去，不管换不换行。以上的每一个示例中，函数声明或对象或数组，都变成了在一句语句体内。要知道闭合圆括号并不代表语句结束，JavaScript 不会终结语句，除非它的下一个 token 是一个中缀符[2] 或者是圆括号操作符。

这真是让人大吃一惊，所以乖乖地给语句末加上分号吧。

澄清：分号与函数

分号需要用在表达式的结尾，而并非函数声明的结尾。区分它们最好的例子是：

js 代码:
    var foo = function() {
    return true;
    }; // semicolon here.
     
    function foo() {
    return true;
    } // no semicolon here.

嵌套函数

嵌套函数是非常有用的，比如用在持续创建和隐藏辅助函数的任务中。你可以非常自由随意地使用它们。

语句块内的函数声明

切勿在语句块内声明函数，在 ECMAScript 5 的严格模式下，这是不合法的。函数声明应该在定义域的顶层。但在语句块内可将函数申明转化为函数表达式赋值给变量。

不推荐

js 代码:
    if (x) {
    function foo() {}
    }

推荐

js 代码:
    if (x) {
    var foo = function() {};
    }

异常

基本上你无法避免出现异常，特别是在做大型开发时（使用应用开发框架等等）。

在没有自定义异常的情况下，从有返回值的函数中返回错误信息一定非常的棘手，更别提多不优雅了。不好的解决方案包括了传第一个引用类型来接纳错误信息，或总是返回一个对象列表，其中包含着可能的错误对象。以上方式基本上是比较简陋的异常处理方式。适时可做自定义异常处理。

在复杂的环境中，你可以考虑抛出对象而不仅仅是字符串（默认的抛出值）。

js 代码:
    if(name === undefined) {
    throw {
    name: 'System Error',
    message: 'A name should always be specified!'
    }
    }

标准特性

总是优先考虑使用标准特性。为了最大限度地保证扩展性与兼容性，总是首选标准的特性，而不是非标准的特性（例如：首选 string.charAt(3) 而不是 string[3]；首选 DOM 的操作方法来获得元素引用，而不是某一应用特定的快捷方法）。

简易的原型继承

如果你想在 JavaScript 中继承你的对象，请遵循一个简易的模式来创建此继承。如果你预计你会遇上复杂对象的继承，那可以考虑采用一个继承库，比如 Proto.js by Axel Rauschmayer.

简易继承请用以下方式：

js 代码:
    (function(log){
    'use strict';
     
    // Constructor function
    function Apple(name) {
    this.name = name;
    }
    // Defining a method of apple
    Apple.prototype.eat = function() {
    log('Eating ' + this.name);
    };
     
    // Constructor function
    function GrannySmithApple() {
    // Invoking parent constructor
    Apple.prototype.constructor.call(this, 'Granny Smith');
    }
    // Set parent prototype while creating a copy with Object.create
    GrannySmithApple.prototype = Object.create(Apple.prototype);
    // Set constructor to the sub type, otherwise points to Apple
    GrannySmithApple.prototype.constructor = GrannySmithApple;
     
    // Calling a super method
    GrannySmithApple.prototype.eat = function() {
    // Be sure to apply it onto our current object with call(this)
    Apple.prototype.eat.call(this);
     
    log('Poor Grany Smith');
    };
     
    // Instantiation
    var apple = new Apple('Test Apple');
    var grannyApple = new GrannySmithApple();
     
    log(apple.name); // Test Apple
    log(grannyApple.name); // Granny Smith
     
    // Instance checks
    log(apple instanceof Apple); // true
    log(apple instanceof GrannySmithApple); // false
     
    log(grannyApple instanceof Apple); // true
    log(grannyApple instanceof GrannySmithApple); // true
     
    // Calling method that calls super method
    grannyApple.eat(); // Eating Granny Smith\nPoor Grany Smith
     
    }(window.console.log));

使用闭包

闭包的创建也许是 JS 最有用也是最易被忽略的能力了。关于闭包如何工作的合理解释。

切勿在循环中创建函数

在简单的循环语句中加入函数是非常容易形成闭包而带来隐患的。下面的例子就是一个典型的陷阱：

不推荐

js 代码:
    (function(log, w){
    'use strict';
     
    // numbers and i is defined in the current function closure
    var numbers = [1, 2, 3],
    i;
     
    for(i = 0; i < numbers.length; i++) {
    w.setTimeout(function() {
    // At the moment when this gets executed the i variable, coming from the outer function scope
    // is set to 3 and the current program is alerting the message 3 times
    // 'Index 3 with number undefined
    // If you understand closures in javascript you know how to deal with those cases
    // It's best to just avoid functions / new closures in loops as this prevents those issues
     
    w.alert('Index ' + i + ' with number ' + numbers[i]);
    }, 0);
    }
     
    }(window.console.log, window));

接下来的改进虽然已经解决了上述例子中的问题或 bug，但还是违反了不在循环中创建函数或闭包的原则。

不推荐

js 代码:
    (function(log, w){
    'use strict';
     
    // numbers and i is defined in the current function closure
    var numbers = [1, 2, 3],
    i;
     
    for(i = 0; i < numbers.length; i++) { // Creating a new closure scope with an IIFE solves the problem // The delayed function will use index and number which are // in their own closure scope (one closure per loop iteration). // --- // Still this is not recommended as we violate our rule to not // create functions within loops and we are creating two! (function(index, number){ w.setTimeout(function() { // Will output as expected 0 > 1, 1 > 2, 2 > 3
    w.alert('Index ' + index + ' with number ' + number);
    }, 0);
    }(i, numbers[i]));
    }
     
    }(window.console.log, window));

接下来的改进已解决问题，而且也遵循了规范。可是，你会发现看上去似乎过于复杂繁冗了，应该会有更好的解决方案吧。

不完全推荐

js 代码:
    (function(log, w){
    'use strict';
     
    // numbers and i is defined in the current function closure
    var numbers = [1, 2, 3],
    i;
     
    // Create a function outside of the loop that will accept arguments to create a
    // function closure scope. This function will return a function that executes in this
    // closure parent scope.
    function alertIndexWithNumber(index, number) {
    return function() {
    w.alert('Index ' + index + ' with number ' + number);
    };
    }
     
    // First parameter is a function call that returns a function.
    // ---
    // This solves our problem and we don't create a function inside our loop
    for(i = 0; i < numbers.length; i++) {
    w.setTimeout(alertIndexWithNumber(i, numbers[i]), 0);
    }
     
    }(window.console.log, window));

将循环语句转换为函数执行的方式问题能得到立马解决，每一次循环都会对应地创建一次闭包。函数式的风格更加值得推荐，而且看上去也更加地自然和可预料。

推荐

js 代码:
    (function(log, w){
    'use strict';
     
    // numbers and i is defined in the current function closure
    var numbers = [1, 2, 3],
    i;
     
    numbers.forEach(function(number, index) {
    w.setTimeout(function() {
    w.alert('Index ' + index + ' with number ' + number);
    }, 0);
    });
     
    }(window.console.log, window));

eval 函数（魔鬼）

eval() 不但混淆语境还很危险，总会有比这更好、更清晰、更安全的另一种方案来写你的代码，因此尽量不要使用 eval 函数。

this 关键字

只在对象构造器、方法和在设定的闭包中使用 this 关键字。this 的语义在此有些误导。它时而指向全局对象（大多数时），时而指向调用者的定义域（在 eval 中），时而指向 DOM 树中的某一节点（当用事件处理绑定到 HTML 属性上时），时而指向一个新创建的对象（在构造器中），还时而指向其它的一些对象（如果函数被 call() 和 apply() 执行和调用时）。

正因为它是如此容易地被搞错，请限制它的使用场景：

  • 在构造函数中
  • 在对象的方法中（包括由此创建出的闭包内）

首选函数式风格

函数式编程让你可以简化代码并缩减维护成本，因为它容易复用，又适当地解耦和更少的依赖。

接下来的例子中，在一组数字求和的同一问题上，比较了两种解决方案。第一个例子是经典的程序处理，而第二个例子则是采用了函数式编程和 ECMA Script 5.1 的数组方法。

例外：往往在重代码性能轻代码维护的情况之下，要选择最优性能的解决方案而非维护性高的方案（比如用简单的循环语句代替 forEach）。

不推荐

js 代码:
    (function(log){
    'use strict';
     
    var arr = [10, 3, 7, 9, 100, 20],
    sum = 0,
    i;
     
     
    for(i = 0; i < arr.length; i++) {
    sum += arr[i];
    }
     
    log('The sum of array ' + arr + ' is: ' + sum)
     
    }(window.console.log));

推荐

js 代码:
    (function(log){
    'use strict';
     
    var arr = [10, 3, 7, 9, 100, 20];
     
    var sum = arr.reduce(function(prevValue, currentValue) {
    return prevValue + currentValue;
    }, 0);
     
    log('The sum of array ' + arr + ' is: ' + sum);
     
    }(window.console.log));

另一个例子通过某一规则对一个数组进行过滤匹配来创建一个新的数组。

不推荐

js 代码:
    (function(log){
    'use strict';
     
    var numbers = [11, 3, 7, 9, 100, 20, 14, 10],
    numbersGreaterTen = [],
    i;
     
     
    for(i = 0; i < numbers.length; i++) { if(numbers[i] > 10) {
    numbersGreaterTen.push(numbers[i]);
    }
    }
     
    log('From the list of numbers ' + numbers + ' only ' + numbersGreaterTen + ' are greater than ten');
     
    }(window.console.log));

推荐

js 代码:
    (function(log){
    'use strict';
     
    var numbers = [11, 3, 7, 9, 100, 20, 14, 10];
     
    var numbersGreaterTen = numbers.filter(function(element) {
    return element > 10;
    });
     
    log('From the list of numbers ' + numbers + ' only ' + numbersGreaterTen + ' are greater than ten');
     
    }(window.console.log));

使用 ECMA Script 5

建议使用 ECMA Script 5 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用。

数组和对象的属性迭代

用 ECMA5 的迭代方法来迭代数组。使用 Array.forEach 或者如果你要在特殊场合下中断迭代，那就用 Array.every。

js 代码:
    (function(log){
    'use strict';
     
    // Iterate over an array and break at a certain condition
    [1, 2, 3, 4, 5].every(function(element, index, arr) {
    log(element + ' at index ' + index + ' in array ' + arr);
     
    if(index !== 5) {
    return true;
    }
    });
     
    // Defining a simple javascript object
    var obj = {
    a: 'A',
    b: 'B',
    'c-d-e': 'CDE'
    };
     
    // Iterating over the object keys
    Object.keys(obj).forEach(function(element, index, arr) {
    log('Key ' + element + ' has value ' + obj[element]);
    });
     
    }(window.console.log));

不要使用 switch

switch 在所有的编程语言中都是个非常错误的难以控制的语句，建议用 if else 来替换它。

数组和对象字面量

用数组和对象字面量来代替数组和对象构造器。数组构造器很容易让人在它的参数上犯错。

不推荐

js 代码:
    // Length is 3.
    var a1 = new Array(x1, x2, x3);
     
    // Length is 2.
    var a2 = new Array(x1, x2);
     
    // If x1 is a number and it is a natural number the length will be x1.
    // If x1 is a number but not a natural number this will throw an exception.
    // Otherwise the array will have one element with x1 as its value.
    var a3 = new Array(x1);
     
    // Length is 0.
    var a4 = new Array();

正因如此，如果将代码传参从两个变为一个，那数组很有可能发生意料不到的长度变化。为避免此类怪异状况，请总是采用更多可读的数组字面量。

推荐

js 代码:
    var a = [x1, x2, x3];
    var a2 = [x1, x2];
    var a3 = [x1];
    var a4 = [];

对象构造器不会有类似的问题，但是为了可读性和统一性，我们应该使用对象字面量。

不推荐

js 代码:
    var o = new Object();
     
    var o2 = new Object();
    o2.a = 0;
    o2.b = 1;
    o2.c = 2;
    o2['strange key'] = 3;

应该写成这样：

推荐

js 代码:
    var o = {};
     
    var o2 = {
    a: 0,
    b: 1,
    c: 2,
    'strange key': 3
    };

修改内建对象的原型链

修改内建的诸如 Object.prototype 和 Array.prototype 是被严厉禁止的。修改其它的内建对象比如 Function.prototype，虽危害没那么大，但始终还是会导致在开发过程中难以 debug 的问题，应当也要避免。

自定义 toString() 方法

你可以通过自定义 toString() 来控制对象字符串化。这很好，但你必须保证你的方法总是成功并不会有其它副作用。如果你的方法达不到这样的标准，那将会引发严重的问题。如果 toString() 调用了一个方法，这个方法做了一个断言[3] ，当断言失败，它可能会输出它所在对象的名称，当然对象也需要调用 toString()。

圆括号

一般在语法和语义上真正需要时才谨慎地使用圆括号。不要用在一元操作符上，例如 delete, typeof 和 void，或在关键字之后，例如 return, throw, case, new 等。

字符串

统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处：

js 代码:
var msg = 'This is some HTML <div class="makes-sense"></div>';

三元条件判断（if 的快捷方法）

用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。

不推荐

js 代码:
    if(x === 10) {
    return 'valid';
    } else {
    return 'invalid';
    }

推荐

js 代码:
return x === 10 ? 'valid' : 'invalid';

四、CSS and Sass (SCSS) style rules

ID and class naming

ID和class(类)名总是使用可以反应元素目的和用途的名称，或其他通用名称。代替表象和晦涩难懂的名称。

应该首选具体和反映元素目的的名称，因为这些是最可以理解的，而且发生变化的可能性最小。

通用名称只是多个元素的备用名，他们兄弟元素之间是一样的，没有特别意义。
区分他们，使他们具有特殊意义，通常需要为“帮手”。

尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义，
语义化的名称 通常是正确的选择，因为它们所代表的信息含义，不包含表现的限制。

不推荐

css 代码
 .fw-800 {
    font-weight: 800;
    }
     
    .red {
    color: red;
    }

推荐

css 代码:
    .heavy {
    font-weight: 800;
    }
     
    .important {
    color: red;
    }

合理的避免使用ID

一般情况下ID不应该被应用于样式。
ID的样式不能被复用并且每个页面中你只能使用一次ID。
使用ID唯一有效的是确定网页或整个站点中的位置。
尽管如此，你应该始终考虑使用class，而不是id，除非只使用一次。

不推荐

css 代码:
    #content .title {
    font-size: 2em;
    }

推荐

css 代码:
    .content .title {
    font-size: 2em;
    }

另一个反对使用ID的观点是含有ID选择器权重很高。
一个只包含一个ID选择器权重高于包含1000个class(类)名的选择器，这使得它很奇怪。

css 代码:
    // 这个选择器权重高于下面的选择器
    #content .title {
    color: red;
    }
     
    // than this selector!
    html body div.content.news-content .title.content-title.important {
    color: blue;
    }

CSS选择器中避免标签名

当构建选择器时应该使用清晰， 准确和有语义的class(类)名。不要使用标签选择器。 如果你只关心你的class(类)名
，而不是你的代码元素，这样会更容易维护。

从分离的角度考虑,在表现层中不应该分配html标记/语义。
它可能是一个有序列表需要被改成一个无序列表，或者一个div将被转换成article。
如果你只使用具有实际意义的class(类)名，
并且不使用元素选择器，那么你只需要改变你的html标记，而不用改动你的CSS。

不推荐

css 代码:
    div.content > header.content-header > h2.title {
    font-size: 2em;
    }

推荐

css 代码:
    .content > .content-header > .title {
    font-size: 2em;
    }

尽可能的精确

很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。
有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。
然而，在任何情况下，这是一个非常不好的做法。
如果你不写很通用的，需要匹配到DOM末端的选择器， 你应该总是考虑直接子选择器。

考虑下面的DOM:

css 代码:
    <article class="content news-content">
    <span class="title">News event</span>
    <div class="content-body">
    <div class="title content-title">
    Check this out
    </div>
     
    <p>This is a news article content</p>
     
    <div class="teaser">
    <div class="title">Buy this</div>
    <div class="teaser-content">Yey!</div>
    </div>
    </div>
    </article>

下面的CSS将应用于有title类的全部三个元素。
然后，要解决content类下的title类 和 teaser类下的title类下不同的样式，这将需要更精确的选择器再次重写他们的样式。

不推荐

css 代码:
    .content .title {
    font-size: 2rem;
    }

推荐

css 代码:
    .content > .title {
    font-size: 2rem;
    }
     
    .content > .content-body > .title {
    font-size: 1.5rem;
    }
     
    .content > .content-body > .teaser > .title {
    font-size: 1.2rem;
    }

缩写属性

CSS提供了各种缩写属性（如 font 字体）应该尽可能使用，即使在只设置一个值的情况下。

使用缩写属性对于代码效率和可读性是有很有用的。

不推荐

css 代码:
    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;

推荐

css 代码:
    border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;

0 和 单位

省略“0”值后面的单位。不要在0值后面使用单位，除非有值。

不推荐

css 代码:
    padding-bottom: 0px;
    margin: 0em;

推荐

css 代码:
    padding-bottom: 0;
    margin: 0;

十六进制表示法

在可能的情况下，使用3个字符的十六进制表示法。
颜色值允许这样表示，
3个字符的十六进制表示法更简短。

始终使用小写的十六进制数字。

不推荐

css 代码:
color: #FF33AA;

推荐

css 代码:
color: #f3a;

ID 和 Class（类） 名的分隔符

使用连字符（中划线）分隔ID和Class（类）名中的单词。为了增强课理解性，在选择器中不要使用除了连字符（中划线）以为的任何字符（包括没有）来连接单词和缩写。

另外，作为该标准，预设属性选择器能识别连字符（中划线）作为单词[attribute|=value]的分隔符，
所以最好的坚持使用连字符作为分隔符。

不推荐

css 代码:
    .demoimage {}
    .error_status {}

推荐

css 代码:
    #video-id {}
    .ads-sample {}

Hacks

避免用户代理检测以及CSS“hacks” – 首先尝试不同的方法。通过用户代理检测或特殊的CSS滤镜，变通的方法和 hacks 很容易解决样式差异。为了达到并保持一个有效的和可管理的代码库，这两种方法都应该被认为是最后的手段。换句话说，从长远来看，用户代理检测和hacks
会伤害项目，作为项目往往应该采取阻力最小的途径。也就是说，轻易允许使用用户代理检测和hacks 以后将过于频繁。

声明顺序

这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。

作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：

  1. 结构性属性：
    1. display
    2. position, left, top, right etc.
    3. overflow, float, clear etc.
    4. margin, padding
  2. 表现性属性：
    1. background, border etc.
    2. font, text

不推荐

css 代码:
    .box {
    font-family: 'Arial', sans-serif;
    border: 3px solid #ddd;
    left: 30%;
    position: absolute;
    text-transform: uppercase;
    background-color: #eee;
    right: 30%;
    isplay: block;
    font-size: 1.5rem;
    overflow: hidden;
    padding: 1em;
    margin: 1em;
    }

推荐

css 代码:
    .box {
    display: block;
    position: absolute;
    left: 30%;
    right: 30%;
    overflow: hidden;
    margin: 1em;
    padding: 1em;
    background-color: #eee;
    border: 3px solid #ddd;
    font-family: 'Arial', sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    }

声明结束

为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。

不推荐

css 代码:
    .test {
    display: block; height: 100px
    }

推荐

css 代码:
    .test {
    display: block;
    height: 100px;
    }

属性名结束

属性名的冒号后使用一个空格。出于一致性的原因，
属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。

不推荐

css 代码:
    h3 {
    font-weight:bold;
    }

推荐

css 代码:
    h3 {
    font-weight: bold;
    }

选择器和声明分离

每个选择器和属性声明总是使用新的一行。

不推荐

css 代码:
    a:focus, a:active {
    position: relative; top: 1px;
    }

推荐

css 代码:
    h1,
    h2,
    h3 {
    font-weight: normal;
    line-height: 1.2;
    }

规则分隔

规则之间始终有一个空行（双换行符）分隔。

推荐

css 代码:
    html {
    background: #fff;
    }
     
    body {
    margin: auto;
    width: 50%;
    }

CSS引号

属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
URI值（url()）不要使用引号。

不推荐

css 代码:
    @import url('//cdn.com/foundation.css');
     
    html {
    font-family: 'open sans', arial, sans-serif;
    }
     
    body:after {
    content: 'pause';
    }

推荐

css 代码:
    @import url(//cdn.com/foundation.css);
     
    html {
    font-family: "open sans", arial, sans-serif;
    }
     
    body:after {
    content: "pause";
    }

选择器嵌套 (SCSS)

在Sass中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。
如果你需要指定一些子元素的样式属性，而父元素将不什么样式属性，
可以使用常规的CSS选择器链。
这将防止您的脚本看起来过于复杂。

不推荐

css 代码:
    // Not a good example by not making use of nesting at all
    .content {
    display: block;
    }
     
    .content > .news-article > .title {
    font-size: 1.2em;
    }

不推荐

css 代码:
    // Using nesting is better but not in all cases
    // Avoid nesting when there is no attributes and use selector chains instead
    .content {
    display: block;
     
    > .news-article {
    > .title {
    font-size: 1.2em;
    }
    }
    }

推荐

css 代码:
    // This example takes the best approach while nesting but use selector chains where possible
    .content {
    display: block;
     
    > .news-article > .title {
    font-size: 1.2em;
    }
    }

嵌套中引入 空行 (SCSS)

嵌套选择器和CSS属性之间空一行。

不推荐

css 代码:
    .content {
    display: block;
    > .news-article {
    background-color: #eee;
    > .title {
    font-size: 1.2em;
    }
    > .article-footnote {
    font-size: 0.8em;
    }
    }
    }

推荐

css 代码:
    .content {
    display: block;
     
    > .news-article {
    background-color: #eee;
     
    > .title {
    font-size: 1.2em;
    }
     
    > .article-footnote {
    font-size: 0.8em;
    }
    }
    }

嵌套顺序和父级选择器(SCSS)

当使用Sass的嵌套功能的时候，
重要的是有一个明确的嵌套顺序，
以下内容是一个SCSS块应具有的顺序。

  1. 当前选择器的样式属性
  2. 父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
  3. 伪类元素 (:before and :after)
  4. 父级选择器的声明样式 (.selected, .active, .enlarged etc.)
  5. 用Sass的上下文媒体查询
  6. 子选择器作为最后的部分

The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.

Recommended

css 代码:
    .product-teaser {
    // 1. Style attributes
    display: inline-block;
    padding: 1rem;
    background-color: whitesmoke;
    color: grey;
     
    // 2. Pseudo selectors with parent selector
    &:hover {
    color: black;
    }
     
    // 3. Pseudo elements with parent selector
    &:before {
    content: "";
    display: block;
    border-top: 1px solid grey;
    }
     
    &:after {
    content: "";
    display: block;
    border-top: 1px solid grey;
    }
     
    // 4. State classes with parent selector
    &.active {
    background-color: pink;
    color: red;
     
    // 4.2. Pseuso selector in state class selector
    &:hover {
    color: darkred;
    }
    }
     
    // 5. Contextual media queries
    @media screen and (max-width: 640px) {
    display: block;
    font-size: 2em;
    }
     
    // 6. Sub selectors
    > .content > .title {
    font-size: 1.2em;
     
    // 6.5. Contextual media queries in sub selector
    @media screen and (max-width: 640px) {
    letter-spacing: 0.2em;
    text-transform: uppercase;
    }
    }
    }
posted @ 2017-11-20 22:53  StrugglingDave  阅读(248)  评论(0)  编辑  收藏  举报