0

Code Guide by @AlloyTeam

Standards for developing flexible, durable, and sustainable HTML and CSS, and maintainable JavaScript

通过分析github代码库总结出来的工程师代码书写习惯:GO!!!

目录

最佳原则

坚持制定好的代码规范。

无论团队人数多少,代码应该同出一门。

如果你想要为这个规范做贡献或觉得有不合理的地方,请访问New Issue

命名规则

项目命名

全部采用小写方式, 以下划线分隔。

例:my_project_name

目录命名

参照项目命名规则;

有复数结构时,要采用复数命名法。

例:scripts, styles, images, data_models

JS文件命名

参照项目命名规则。

例:account_model.js

CSS, SCSS文件命名

参照项目命名规则。

例:retina_sprites.scss

HTML文件命名

参照项目命名规则。

例:error_report.html

HTML

语法

  • 缩进使用soft tab(4个空格);
  • 嵌套的节点应该缩进;
  • 在属性上,使用双引号,不要使用单引号;
  • 属性名全小写,用中划线做分隔符;
  • 不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);
  • 不要忽略可选的关闭标签,例:</li></body>
<code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
    <span class="nt">&lt;head&gt;</span>
        <span class="nt">&lt;title&gt;</span>Page title<span class="nt">&lt;/title&gt;</span>
    <span class="nt">&lt;/head&gt;</span>
    <span class="nt">&lt;body&gt;</span>
        <span class="nt">&lt;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">&gt;</span>

        <span class="nt">&lt;h1</span> <span class="na">class=</span><span class="s">"hello-world"</span><span class="nt">&gt;</span>Hello, world!<span class="nt">&lt;/h1&gt;</span>
    <span class="nt">&lt;/body&gt;</span>
<span class="nt">&lt;/html&gt;</span></code>

HTML5 doctype

在页面开头使用这个简单地doctype来启用标准模式,使其在每个浏览器中尽可能一致的展现;

虽然doctype不区分大小写,但是按照惯例,doctype大写 (关于html属性,大写还是小写)。

<code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
	...
<span class="nt">&lt;/html&gt;</span></code>

lang属性

根据HTML5规范:

应在html标签上加上lang属性。这会给语音工具和翻译工具帮助,告诉它们应当怎么去发音和翻译。

更多关于 lang 属性的说明在这里

在sitepoint上可以查到语言列表

但sitepoint只是给出了语言的大类,例如中文只给出了zh,但是没有区分香港,台湾,大陆。而微软给出了一份更加详细的语言列表,其中细分了zh-cn, zh-hk, zh-tw。

<code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en-us"</span><span class="nt">&gt;</span>
    ...
<span class="nt">&lt;/html&gt;</span></code>

字符编码

通过声明一个明确的字符编码,让浏览器轻松、快速的确定适合网页内容的渲染方式,通常指定为’UTF-8’。

<code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
    <span class="nt">&lt;head&gt;</span>
        <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/head&gt;</span>
    ...
<span class="nt">&lt;/html&gt;</span></code>

IE兼容模式

<meta> 标签可以指定页面应该用什么版本的IE来渲染;

如果你想要了解更多,请点击这里

不同doctype在不同浏览器下会触发不同的渲染模式(这篇文章总结的很到位)。

<code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html&gt;</span>
    <span class="nt">&lt;head&gt;</span>
        <span class="nt">&lt;meta</span> <span class="na">http-equiv=</span><span class="s">"X-UA-Compatible"</span> <span class="na">content=</span><span class="s">"IE=Edge"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;/head&gt;</span>
    ...
<span class="nt">&lt;/html&gt;</span></code>

引入CSS, JS

根据HTML5规范, 通常在引入CSS和JS时不需要指明 type,因为 text/csstext/javascript 分别是他们的默认值。

HTML5 规范链接

<code class="language-html" data-lang="html"><span class="c">&lt;!-- External CSS --&gt;</span>
<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"code_guide.css"</span><span class="nt">&gt;</span>

<span class="c">&lt;!-- In-document CSS --&gt;</span>
<span class="nt">&lt;style&gt;</span>
    <span class="o">...</span>
<span class="nt">&lt;/style&gt;</span>

<span class="c">&lt;!-- External JS --&gt;</span>
<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"code_guide.js"</span><span class="nt">&gt;&lt;/script&gt;</span>

<span class="c">&lt;!-- In-document JS --&gt;</span>
<span class="nt">&lt;script&gt;</span>
    <span class="p">...</span>
<span class="nt">&lt;/script&gt;</span></code>

属性顺序

属性应该按照特定的顺序出现以保证易读性;

  • class
  • id
  • name
  • data-*
  • src, for, type, href, value , max-length, max, min, pattern
  • placeholder, title, alt
  • aria-*, role
  • required, readonly, disabled

class是为高可复用组件设计的,所以应处在第一位;

id更加具体且应该尽量少使用,所以将它放在第二位。

<code class="language-html" data-lang="html"><span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"..."</span> <span class="na">id=</span><span class="s">"..."</span> <span class="na">data-modal=</span><span class="s">"toggle"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>Example link<span class="nt">&lt;/a&gt;</span>

<span class="nt">&lt;input</span> <span class="na">class=</span><span class="s">"form-control"</span> <span class="na">type=</span><span class="s">"text"</span><span class="nt">&gt;</span>

<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span></code>

boolean属性

boolean属性指不需要声明取值的属性,XHTML需要每个属性声明取值,但是HTML5并不需要;

更多内容可以参考 WhatWG section on boolean attributes

boolean属性的存在表示取值为true,不存在则表示取值为false。

<code class="language-html" data-lang="html"><span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">disabled</span><span class="nt">&gt;</span>

<span class="nt">&lt;input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">checked</span><span class="nt">&gt;</span>

<span class="nt">&lt;select&gt;</span>
    <span class="nt">&lt;option</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">selected</span><span class="nt">&gt;</span>1<span class="nt">&lt;/option&gt;</span>
<span class="nt">&lt;/select&gt;</span></code>

JS生成标签

在JS文件中生成标签让内容变得更难查找,更难编辑,性能更差。应该尽量避免这种情况的出现。

减少标签数量

在编写HTML代码时,需要尽量避免多余的父节点;

很多时候,需要通过迭代和重构来使HTML变得更少。

<code class="language-html" data-lang="html"><span class="c">&lt;!-- Not well --&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">"avatar"</span><span class="nt">&gt;</span>
    <span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/span&gt;</span>

<span class="c">&lt;!-- Better --&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"avatar"</span> <span class="na">src=</span><span class="s">"..."</span><span class="nt">&gt;</span></code>

实用高于完美

尽量遵循HTML标准和语义,但是不应该以浪费实用性作为代价;

任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

CSS, SCSS

缩进

使用soft tab(4个空格)。

<code class="language-css" data-lang="css"><span class="nc">.element</span> <span class="p">{</span>
    <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span>
    <span class="k">top</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
    <span class="k">left</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>

    <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
    <span class="k">width</span><span class="o">:</span> <span class="m">50px</span><span class="p">;</span>
    <span class="k">height</span><span class="o">:</span> <span class="m">50px</span><span class="p">;</span>
<span class="p">}</span></code>

分号

每个属性声明末尾都要加分号。

<code class="language-css" data-lang="css"><span class="nc">.element</span> <span class="p">{</span>
    <span class="k">width</span><span class="o">:</span> <span class="m">20px</span><span class="p">;</span>
    <span class="k">height</span><span class="o">:</span> <span class="m">20px</span><span class="p">;</span>

    <span class="k">background-color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
<span class="p">}</span></code>

空格

以下几种情况不需要空格:

  • 属性名后
  • 多个规则的分隔符’,’前
  • !important ‘!’后
  • 属性值中'(‘后和’)’前
  • 行末不要有多余的空格

以下几种情况需要空格:

  • 属性值前
  • 选择器’>’, ‘+’, ‘~’前后
  • ‘{‘前
  • !important ‘!’前
  • @else 前后
  • 属性值中的’,’后
  • 注释’/*’后和’*/’前
<code class="language-css" data-lang="css"><span class="c">/* not good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">color</span> <span class="o">:</span><span class="nb">red</span><span class="o">!</span> <span class="n">important</span><span class="p">;</span>
    <span class="k">background-color</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,</span><span class="m">0</span><span class="o">,.</span><span class="m">5</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">color</span><span class="o">:</span> <span class="nb">red</span> <span class="cp">!important</span><span class="p">;</span>
    <span class="k">background-color</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="o">.</span><span class="m">5</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* not good */</span>
<span class="nc">.element</span> <span class="o">,</span>
<span class="nc">.dialog</span><span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span><span class="o">,</span>
<span class="nc">.dialog</span> <span class="p">{</span>

<span class="p">}</span>

<span class="c">/* not good */</span>
<span class="nc">.element</span><span class="o">&gt;</span><span class="nc">.dialog</span><span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span> <span class="o">&gt;</span> <span class="nc">.dialog</span><span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* not good */</span>
<span class="nc">.element</span><span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* not good */</span>
<span class="k">@if</span><span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span><span class="k">@else</span><span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="k">@if</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span> <span class="k">@else</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span></code>

空行

以下几种情况需要空行:

  • 文件最后保留一个空行
  • ‘}’后最好跟一个空行,包括scss中嵌套的规则
  • 属性之间需要适当的空行,具体见属性声明顺序
<code class="language-css" data-lang="css"><span class="c">/* not good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>
<span class="nc">.dialog</span> <span class="p">{</span>
    <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
    <span class="o">&amp;:</span><span class="n">after</span> <span class="err">{</span>
        <span class="o">...</span>
    <span class="p">}</span>
<span class="err">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="nc">.dialog</span> <span class="p">{</span>
    <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>

    <span class="o">&amp;:</span><span class="n">after</span> <span class="err">{</span>
        <span class="o">...</span>
    <span class="p">}</span>
<span class="err">}</span></code>

换行

以下几种情况不需要换行:

  • ‘{‘前

以下几种情况需要换行:

  • ‘{‘后和’}’前
  • 每个属性独占一行
  • 多个规则的分隔符’,’后
<code class="language-css" data-lang="css"><span class="c">/* not good */</span>
<span class="nc">.element</span>
<span class="p">{</span><span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span> <span class="k">background-color</span><span class="o">:</span> <span class="nb">black</span><span class="p">;}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span>
    <span class="k">background-color</span><span class="o">:</span> <span class="nb">black</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* not good */</span>
<span class="nc">.element</span><span class="o">,</span> <span class="nc">.dialog</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span><span class="o">,</span>
<span class="nc">.dialog</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span></code>

注释

注释统一用’/* */’(scss中也不要用’//’),具体参照右边的写法;

缩进与下一行代码保持一致;

可位于一个代码行的末尾,与代码间隔一个空格。

<code class="language-css" data-lang="css"><span class="c">/* Modal header */</span>
<span class="nc">.modal-header</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/*</span>
<span class="c"> * Modal header</span>
<span class="c"> */</span>
<span class="nc">.modal-header</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="nc">.modal-header</span> <span class="p">{</span>
    <span class="c">/* 50px */</span>
    <span class="k">width</span><span class="o">:</span> <span class="m">50px</span><span class="p">;</span>

    <span class="k">color</span><span class="o">:</span> <span class="nb">red</span><span class="p">;</span> <span class="c">/* color red */</span>
<span class="p">}</span></code>

引号

最外层统一使用双引号;

url的内容要用引号;

属性选择器中的属性值需要引号。

<code class="language-css" data-lang="css"><span class="nc">.element</span><span class="nd">:after</span> <span class="p">{</span>
    <span class="k">content</span><span class="o">:</span> <span class="s2">""</span><span class="p">;</span>
    <span class="k">background-image</span><span class="o">:</span> <span class="sx">url("logo.png")</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">li</span><span class="o">[</span><span class="nt">data-type</span><span class="o">=</span><span class="s2">"single"</span><span class="o">]</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span></code>

命名

  • 类名使用小写字母,以中划线分隔
  • id采用驼峰式命名
  • scss中的变量、函数、混合、placeholder采用驼峰式命名
<code class="language-css" data-lang="css"><span class="c">/* class */</span>
<span class="nc">.element-content</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* id */</span>
<span class="nf">#myDialog</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* 变量 */</span>
<span class="o">$</span><span class="nt">colorBlack</span><span class="o">:</span> <span class="nf">#000</span><span class="o">;</span>

<span class="c">/* 函数 */</span>
<span class="k">@function</span> <span class="nt">pxToRem</span><span class="o">($</span><span class="nt">px</span><span class="o">)</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* 混合 */</span>
<span class="k">@mixin</span> <span class="nt">centerBlock</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* placeholder */</span>
<span class="o">%</span><span class="nt">myDialog</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span></code>

属性声明顺序

相关的属性声明按右边的顺序做分组处理,组之间需要有一个空行。

<code class="language-css" data-lang="css"><span class="nc">.declaration-order</span> <span class="p">{</span>
    <span class="k">display</span><span class="o">:</span> <span class="k">block</span><span class="p">;</span>
    <span class="k">float</span><span class="o">:</span> <span class="k">right</span><span class="p">;</span>

    <span class="k">position</span><span class="o">:</span> <span class="k">absolute</span><span class="p">;</span>
    <span class="k">top</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="k">right</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="k">bottom</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="k">left</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
    <span class="k">z-index</span><span class="o">:</span> <span class="m">100</span><span class="p">;</span>

    <span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="m">#e5e5e5</span><span class="p">;</span>
    <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>
    <span class="k">width</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span>
    <span class="k">height</span><span class="o">:</span> <span class="m">100px</span><span class="p">;</span>

    <span class="k">font</span><span class="o">:</span> <span class="k">normal</span> <span class="m">13px</span> <span class="s2">"Helvetica Neue"</span><span class="o">,</span> <span class="k">sans-serif</span><span class="p">;</span>
    <span class="k">line-height</span><span class="o">:</span> <span class="m">1</span><span class="o">.</span><span class="m">5</span><span class="p">;</span>
    <span class="k">text-align</span><span class="o">:</span> <span class="k">center</span><span class="p">;</span>

    <span class="k">color</span><span class="o">:</span> <span class="m">#333</span><span class="p">;</span>
    <span class="k">background-color</span><span class="o">:</span> <span class="m">#f5f5f5</span><span class="p">;</span>

    <span class="k">opacity</span><span class="o">:</span> <span class="m">1</span><span class="p">;</span>
<span class="p">}</span></code>
<code class="language-javascript" data-lang="javascript"><span class="c1">// 下面是推荐的属性的顺序</span>
<span class="p">[</span>
    <span class="p">[</span>
        <span class="s2">"display"</span><span class="p">,</span>
        <span class="s2">"visibility"</span><span class="p">,</span>
        <span class="s2">"float"</span><span class="p">,</span>
        <span class="s2">"clear"</span><span class="p">,</span>
        <span class="s2">"overflow"</span><span class="p">,</span>
        <span class="s2">"overflow-x"</span><span class="p">,</span>
        <span class="s2">"overflow-y"</span><span class="p">,</span>
        <span class="s2">"clip"</span><span class="p">,</span>
        <span class="s2">"zoom"</span>
    <span class="p">],</span>
    <span class="p">[</span>
        <span class="s2">"table-layout"</span><span class="p">,</span>
        <span class="s2">"empty-cells"</span><span class="p">,</span>
        <span class="s2">"caption-side"</span><span class="p">,</span>
        <span class="s2">"border-spacing"</span><span class="p">,</span>
        <span class="s2">"border-collapse"</span><span class="p">,</span>
        <span class="s2">"list-style"</span><span class="p">,</span>
        <span class="s2">"list-style-position"</span><span class="p">,</span>
        <span class="s2">"list-style-type"</span><span class="p">,</span>
        <span class="s2">"list-style-image"</span>
    <span class="p">],</span>
    <span class="p">[</span>
        <span class="s2">"-webkit-box-orient"</span><span class="p">,</span>
        <span class="s2">"-webkit-box-direction"</span><span class="p">,</span>
        <span class="s2">"-webkit-box-decoration-break"</span><span class="p">,</span>
        <span class="s2">"-webkit-box-pack"</span><span class="p">,</span>
        <span class="s2">"-webkit-box-align"</span><span class="p">,</span>
        <span class="s2">"-webkit-box-flex"</span>
    <span class="p">],</span>
    <span class="p">[</span>
        <span class="s2">"position"</span><span class="p">,</span>
        <span class="s2">"top"</span><span class="p">,</span>
        <span class="s2">"right"</span><span class="p">,</span>
        <span class="s2">"bottom"</span><span class="p">,</span>
        <span class="s2">"left"</span><span class="p">,</span>
        <span class="s2">"z-index"</span>
    <span class="p">],</span>
    <span class="p">[</span>
        <span class="s2">"margin"</span><span class="p">,</span>
        <span class="s2">"margin-top"</span><span class="p">,</span>
        <span class="s2">"margin-right"</span><span class="p">,</span>
        <span class="s2">"margin-bottom"</span><span class="p">,</span>
        <span class="s2">"margin-left"</span><span class="p">,</span>
        <span class="s2">"-webkit-box-sizing"</span><span class="p">,</span>
        <span class="s2">"-moz-box-sizing"</span><span class="p">,</span>
        <span class="s2">"box-sizing"</span><span class="p">,</span>
        <span class="s2">"border"</span><span class="p">,</span>
        <span class="s2">"border-width"</span><span class="p">,</span>
        <span class="s2">"border-style"</span><span class="p">,</span>
        <span class="s2">"border-color"</span><span class="p">,</span>
        <span class="s2">"border-top"</span><span class="p">,</span>
        <span class="s2">"border-top-width"</span><span class="p">,</span>
        <span class="s2">"border-top-style"</span><span class="p">,</span>
        <span class="s2">"border-top-color"</span><span class="p">,</span>
        <span class="s2">"border-right"</span><span class="p">,</span>
        <span class="s2">"border-right-width"</span><span class="p">,</span>
        <span class="s2">"border-right-style"</span><span class="p">,</span>
        <span class="s2">"border-right-color"</span><span class="p">,</span>
        <span class="s2">"border-bottom"</span><span class="p">,</span>
        <span class="s2">"border-bottom-width"</span><span class="p">,</span>
        <span class="s2">"border-bottom-style"</span><span class="p">,</span>
        <span class="s2">"border-bottom-color"</span><span class="p">,</span>
        <span class="s2">"border-left"</span><span class="p">,</span>
        <span class="s2">"border-left-width"</span><span class="p">,</span>
        <span class="s2">"border-left-style"</span><span class="p">,</span>
        <span class="s2">"border-left-color"</span><span class="p">,</span>
        <span class="s2">"-webkit-border-radius"</span><span class="p">,</span>
        <span class="s2">"-moz-border-radius"</span><span class="p">,</span>
        <span class="s2">"border-radius"</span><span class="p">,</span>
        <span class="s2">"-webkit-border-top-left-radius"</span><span class="p">,</span>
        <span class="s2">"-moz-border-radius-topleft"</span><span class="p">,</span>
        <span class="s2">"border-top-left-radius"</span><span class="p">,</span>
        <span class="s2">"-webkit-border-top-right-radius"</span><span class="p">,</span>
        <span class="s2">"-moz-border-radius-topright"</span><span class="p">,</span>
        <span class="s2">"border-top-right-radius"</span><span class="p">,</span>
        <span class="s2">"-webkit-border-bottom-right-radius"</span><span class="p">,</span>
        <span class="s2">"-moz-border-radius-bottomright"</span><span class="p">,</span>
        <span class="s2">"border-bottom-right-radius"</span><span class="p">,</span>
        <span class="s2">"-webkit-border-bottom-left-radius"</span><span class="p">,</span>
        <span class="s2">"-moz-border-radius-bottomleft"</span><span class="p">,</span>
        <span class="s2">"border-bottom-left-radius"</span><span class="p">,</span>
        <span class="s2">"-webkit-border-image"</span><span class="p">,</span>
        <span class="s2">"-moz-border-image"</span><span class="p">,</span>
        <span class="s2">"-o-border-image"</span><span class="p">,</span>
        <span class="s2">"border-image"</span><span class="p">,</span>
        <span class="s2">"-webkit-border-image-source"</span><span class="p">,</span>
        <span class="s2">"-moz-border-image-source"</span><span class="p">,</span>
        <span class="s2">"-o-border-image-source"</span><span class="p">,</span>
        <span class="s2">"border-image-source"</span><span class="p">,</span>
        <span class="s2">"-webkit-border-image-slice"</span><span class="p">,</span>
        <span class="s2">"-moz-border-image-slice"</span><span class="p">,</span>
        <span class="s2">"-o-border-image-slice"</span><span class="p">,</span>
        <span class="s2">"border-image-slice"</span><span class="p">,</span>
        <span class="s2">"-webkit-border-image-width"</span><span class="p">,</span>
        <span class="s2">"-moz-border-image-width"</span><span class="p">,</span>
        <span class="s2">"-o-border-image-width"</span><span class="p">,</span>
        <span class="s2">"border-image-width"</span><span class="p">,</span>
        <span class="s2">"-webkit-border-image-outset"</span><span class="p">,</span>
        <span class="s2">"-moz-border-image-outset"</span><span class="p">,</span>
        <span class="s2">"-o-border-image-outset"</span><span class="p">,</span>
        <span class="s2">"border-image-outset"</span><span class="p">,</span>
        <span class="s2">"-webkit-border-image-repeat"</span><span class="p">,</span>
        <span class="s2">"-moz-border-image-repeat"</span><span class="p">,</span>
        <span class="s2">"-o-border-image-repeat"</span><span class="p">,</span>
        <span class="s2">"border-image-repeat"</span><span class="p">,</span>
        <span class="s2">"padding"</span><span class="p">,</span>
        <span class="s2">"padding-top"</span><span class="p">,</span>
        <span class="s2">"padding-right"</span><span class="p">,</span>
        <span class="s2">"padding-bottom"</span><span class="p">,</span>
        <span class="s2">"padding-left"</span><span class="p">,</span>
        <span class="s2">"width"</span><span class="p">,</span>
        <span class="s2">"min-width"</span><span class="p">,</span>
        <span class="s2">"max-width"</span><span class="p">,</span>
        <span class="s2">"height"</span><span class="p">,</span>
        <span class="s2">"min-height"</span><span class="p">,</span>
        <span class="s2">"max-height"</span>
    <span class="p">],</span>
    <span class="p">[</span>
        <span class="s2">"font"</span><span class="p">,</span>
        <span class="s2">"font-family"</span><span class="p">,</span>
        <span class="s2">"font-size"</span><span class="p">,</span>
        <span class="s2">"font-weight"</span><span class="p">,</span>
        <span class="s2">"font-style"</span><span class="p">,</span>
        <span class="s2">"font-variant"</span><span class="p">,</span>
        <span class="s2">"font-size-adjust"</span><span class="p">,</span>
        <span class="s2">"font-stretch"</span><span class="p">,</span>
        <span class="s2">"font-effect"</span><span class="p">,</span>
        <span class="s2">"font-emphasize"</span><span class="p">,</span>
        <span class="s2">"font-emphasize-position"</span><span class="p">,</span>
        <span class="s2">"font-emphasize-style"</span><span class="p">,</span>
        <span class="s2">"font-smooth"</span><span class="p">,</span>
        <span class="s2">"line-height"</span><span class="p">,</span>
        <span class="s2">"text-align"</span><span class="p">,</span>
        <span class="s2">"-webkit-text-align-last"</span><span class="p">,</span>
        <span class="s2">"-moz-text-align-last"</span><span class="p">,</span>
        <span class="s2">"-ms-text-align-last"</span><span class="p">,</span>
        <span class="s2">"text-align-last"</span><span class="p">,</span>
        <span class="s2">"vertical-align"</span><span class="p">,</span>
        <span class="s2">"white-space"</span><span class="p">,</span>
        <span class="s2">"text-decoration"</span><span class="p">,</span>
        <span class="s2">"text-emphasis"</span><span class="p">,</span>
        <span class="s2">"text-emphasis-color"</span><span class="p">,</span>
        <span class="s2">"text-emphasis-style"</span><span class="p">,</span>
        <span class="s2">"text-emphasis-position"</span><span class="p">,</span>
        <span class="s2">"text-indent"</span><span class="p">,</span>
        <span class="s2">"-ms-text-justify"</span><span class="p">,</span>
        <span class="s2">"text-justify"</span><span class="p">,</span>
        <span class="s2">"letter-spacing"</span><span class="p">,</span>
        <span class="s2">"word-spacing"</span><span class="p">,</span>
        <span class="s2">"-ms-writing-mode"</span><span class="p">,</span>
        <span class="s2">"text-outline"</span><span class="p">,</span>
        <span class="s2">"text-transform"</span><span class="p">,</span>
        <span class="s2">"text-wrap"</span><span class="p">,</span>
        <span class="s2">"-ms-text-overflow"</span><span class="p">,</span>
        <span class="s2">"text-overflow"</span><span class="p">,</span>
        <span class="s2">"text-overflow-ellipsis"</span><span class="p">,</span>
        <span class="s2">"text-overflow-mode"</span><span class="p">,</span>
        <span class="s2">"-ms-word-wrap"</span><span class="p">,</span>
        <span class="s2">"word-wrap"</span><span class="p">,</span>
        <span class="s2">"-ms-word-break"</span><span class="p">,</span>
        <span class="s2">"word-break"</span>
    <span class="p">],</span>
    <span class="p">[</span>
        <span class="s2">"color"</span><span class="p">,</span>
        <span class="s2">"background"</span><span class="p">,</span>
        <span class="s2">"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"</span><span class="p">,</span>
        <span class="s2">"background-color"</span><span class="p">,</span>
        <span class="s2">"background-image"</span><span class="p">,</span>
        <span class="s2">"background-repeat"</span><span class="p">,</span>
        <span class="s2">"background-attachment"</span><span class="p">,</span>
        <span class="s2">"background-position"</span><span class="p">,</span>
        <span class="s2">"-ms-background-position-x"</span><span class="p">,</span>
        <span class="s2">"background-position-x"</span><span class="p">,</span>
        <span class="s2">"-ms-background-position-y"</span><span class="p">,</span>
        <span class="s2">"background-position-y"</span><span class="p">,</span>
        <span class="s2">"-webkit-background-clip"</span><span class="p">,</span>
        <span class="s2">"-moz-background-clip"</span><span class="p">,</span>
        <span class="s2">"background-clip"</span><span class="p">,</span>
        <span class="s2">"background-origin"</span><span class="p">,</span>
        <span class="s2">"-webkit-background-size"</span><span class="p">,</span>
        <span class="s2">"-moz-background-size"</span><span class="p">,</span>
        <span class="s2">"-o-background-size"</span><span class="p">,</span>
        <span class="s2">"background-size"</span>
    <span class="p">],</span>
    <span class="p">[</span>
        <span class="s2">"outline"</span><span class="p">,</span>
        <span class="s2">"outline-width"</span><span class="p">,</span>
        <span class="s2">"outline-style"</span><span class="p">,</span>
        <span class="s2">"outline-color"</span><span class="p">,</span>
        <span class="s2">"outline-offset"</span><span class="p">,</span>
        <span class="s2">"opacity"</span><span class="p">,</span>
        <span class="s2">"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity"</span><span class="p">,</span>
        <span class="s2">"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha"</span><span class="p">,</span>
        <span class="s2">"-ms-interpolation-mode"</span><span class="p">,</span>
        <span class="s2">"-webkit-box-shadow"</span><span class="p">,</span>
        <span class="s2">"-moz-box-shadow"</span><span class="p">,</span>
        <span class="s2">"box-shadow"</span><span class="p">,</span>
        <span class="s2">"filter:progid:DXImageTransform.Microsoft.gradient"</span><span class="p">,</span>
        <span class="s2">"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient"</span><span class="p">,</span>
        <span class="s2">"text-shadow"</span>
    <span class="p">],</span>
    <span class="p">[</span>
        <span class="s2">"-webkit-transition"</span><span class="p">,</span>
        <span class="s2">"-moz-transition"</span><span class="p">,</span>
        <span class="s2">"-ms-transition"</span><span class="p">,</span>
        <span class="s2">"-o-transition"</span><span class="p">,</span>
        <span class="s2">"transition"</span><span class="p">,</span>
        <span class="s2">"-webkit-transition-delay"</span><span class="p">,</span>
        <span class="s2">"-moz-transition-delay"</span><span class="p">,</span>
        <span class="s2">"-ms-transition-delay"</span><span class="p">,</span>
        <span class="s2">"-o-transition-delay"</span><span class="p">,</span>
        <span class="s2">"transition-delay"</span><span class="p">,</span>
        <span class="s2">"-webkit-transition-timing-function"</span><span class="p">,</span>
        <span class="s2">"-moz-transition-timing-function"</span><span class="p">,</span>
        <span class="s2">"-ms-transition-timing-function"</span><span class="p">,</span>
        <span class="s2">"-o-transition-timing-function"</span><span class="p">,</span>
        <span class="s2">"transition-timing-function"</span><span class="p">,</span>
        <span class="s2">"-webkit-transition-duration"</span><span class="p">,</span>
        <span class="s2">"-moz-transition-duration"</span><span class="p">,</span>
        <span class="s2">"-ms-transition-duration"</span><span class="p">,</span>
        <span class="s2">"-o-transition-duration"</span><span class="p">,</span>
        <span class="s2">"transition-duration"</span><span class="p">,</span>
        <span class="s2">"-webkit-transition-property"</span><span class="p">,</span>
        <span class="s2">"-moz-transition-property"</span><span class="p">,</span>
        <span class="s2">"-ms-transition-property"</span><span class="p">,</span>
        <span class="s2">"-o-transition-property"</span><span class="p">,</span>
        <span class="s2">"transition-property"</span><span class="p">,</span>
        <span class="s2">"-webkit-transform"</span><span class="p">,</span>
        <span class="s2">"-moz-transform"</span><span class="p">,</span>
        <span class="s2">"-ms-transform"</span><span class="p">,</span>
        <span class="s2">"-o-transform"</span><span class="p">,</span>
        <span class="s2">"transform"</span><span class="p">,</span>
        <span class="s2">"-webkit-transform-origin"</span><span class="p">,</span>
        <span class="s2">"-moz-transform-origin"</span><span class="p">,</span>
        <span class="s2">"-ms-transform-origin"</span><span class="p">,</span>
        <span class="s2">"-o-transform-origin"</span><span class="p">,</span>
        <span class="s2">"transform-origin"</span><span class="p">,</span>
        <span class="s2">"-webkit-animation"</span><span class="p">,</span>
        <span class="s2">"-moz-animation"</span><span class="p">,</span>
        <span class="s2">"-ms-animation"</span><span class="p">,</span>
        <span class="s2">"-o-animation"</span><span class="p">,</span>
        <span class="s2">"animation"</span><span class="p">,</span>
        <span class="s2">"-webkit-animation-name"</span><span class="p">,</span>
        <span class="s2">"-moz-animation-name"</span><span class="p">,</span>
        <span class="s2">"-ms-animation-name"</span><span class="p">,</span>
        <span class="s2">"-o-animation-name"</span><span class="p">,</span>
        <span class="s2">"animation-name"</span><span class="p">,</span>
        <span class="s2">"-webkit-animation-duration"</span><span class="p">,</span>
        <span class="s2">"-moz-animation-duration"</span><span class="p">,</span>
        <span class="s2">"-ms-animation-duration"</span><span class="p">,</span>
        <span class="s2">"-o-animation-duration"</span><span class="p">,</span>
        <span class="s2">"animation-duration"</span><span class="p">,</span>
        <span class="s2">"-webkit-animation-play-state"</span><span class="p">,</span>
        <span class="s2">"-moz-animation-play-state"</span><span class="p">,</span>
        <span class="s2">"-ms-animation-play-state"</span><span class="p">,</span>
        <span class="s2">"-o-animation-play-state"</span><span class="p">,</span>
        <span class="s2">"animation-play-state"</span><span class="p">,</span>
        <span class="s2">"-webkit-animation-timing-function"</span><span class="p">,</span>
        <span class="s2">"-moz-animation-timing-function"</span><span class="p">,</span>
        <span class="s2">"-ms-animation-timing-function"</span><span class="p">,</span>
        <span class="s2">"-o-animation-timing-function"</span><span class="p">,</span>
        <span class="s2">"animation-timing-function"</span><span class="p">,</span>
        <span class="s2">"-webkit-animation-delay"</span><span class="p">,</span>
        <span class="s2">"-moz-animation-delay"</span><span class="p">,</span>
        <span class="s2">"-ms-animation-delay"</span><span class="p">,</span>
        <span class="s2">"-o-animation-delay"</span><span class="p">,</span>
        <span class="s2">"animation-delay"</span><span class="p">,</span>
        <span class="s2">"-webkit-animation-iteration-count"</span><span class="p">,</span>
        <span class="s2">"-moz-animation-iteration-count"</span><span class="p">,</span>
        <span class="s2">"-ms-animation-iteration-count"</span><span class="p">,</span>
        <span class="s2">"-o-animation-iteration-count"</span><span class="p">,</span>
        <span class="s2">"animation-iteration-count"</span><span class="p">,</span>
        <span class="s2">"-webkit-animation-direction"</span><span class="p">,</span>
        <span class="s2">"-moz-animation-direction"</span><span class="p">,</span>
        <span class="s2">"-ms-animation-direction"</span><span class="p">,</span>
        <span class="s2">"-o-animation-direction"</span><span class="p">,</span>
        <span class="s2">"animation-direction"</span>
    <span class="p">],</span>
    <span class="p">[</span>
        <span class="s2">"content"</span><span class="p">,</span>
        <span class="s2">"quotes"</span><span class="p">,</span>
        <span class="s2">"counter-reset"</span><span class="p">,</span>
        <span class="s2">"counter-increment"</span><span class="p">,</span>
        <span class="s2">"resize"</span><span class="p">,</span>
        <span class="s2">"cursor"</span><span class="p">,</span>
        <span class="s2">"-webkit-user-select"</span><span class="p">,</span>
        <span class="s2">"-moz-user-select"</span><span class="p">,</span>
        <span class="s2">"-ms-user-select"</span><span class="p">,</span>
        <span class="s2">"user-select"</span><span class="p">,</span>
        <span class="s2">"nav-index"</span><span class="p">,</span>
        <span class="s2">"nav-up"</span><span class="p">,</span>
        <span class="s2">"nav-right"</span><span class="p">,</span>
        <span class="s2">"nav-down"</span><span class="p">,</span>
        <span class="s2">"nav-left"</span><span class="p">,</span>
        <span class="s2">"-moz-tab-size"</span><span class="p">,</span>
        <span class="s2">"-o-tab-size"</span><span class="p">,</span>
        <span class="s2">"tab-size"</span><span class="p">,</span>
        <span class="s2">"-webkit-hyphens"</span><span class="p">,</span>
        <span class="s2">"-moz-hyphens"</span><span class="p">,</span>
        <span class="s2">"hyphens"</span><span class="p">,</span>
        <span class="s2">"pointer-events"</span>
    <span class="p">]</span>
<span class="p">]</span></code>

颜色

颜色16进制用小写字母;

颜色16进制尽量用简写。

<code class="language-css" data-lang="css"><span class="c">/* not good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">color</span><span class="o">:</span> <span class="m">#ABCDEF</span><span class="p">;</span>
    <span class="k">background-color</span><span class="o">:</span> <span class="m">#001122</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">color</span><span class="o">:</span> <span class="m">#abcdef</span><span class="p">;</span>
    <span class="k">background-color</span><span class="o">:</span> <span class="m">#012</span><span class="p">;</span>
<span class="p">}</span></code>

属性简写

属性简写需要你非常清楚属性值的正确顺序,而且在大多数情况下并不需要设置属性简写中包含的所有值,所以建议尽量分开声明会更加清晰;

marginpadding 相反,需要使用简写;

常见的属性简写包括:

  • font
  • background
  • transition
  • animation
<code class="language-css" data-lang="css"><span class="c">/* not good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="n">transition</span><span class="o">:</span> <span class="k">opacity</span> <span class="m">1s</span> <span class="n">linear</span> <span class="m">2s</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="n">transition</span><span class="o">-</span><span class="n">delay</span><span class="o">:</span> <span class="m">2s</span><span class="p">;</span>
    <span class="n">transition</span><span class="o">-</span><span class="n">timing</span><span class="o">-</span><span class="n">function</span><span class="o">:</span> <span class="n">linear</span><span class="p">;</span>
    <span class="n">transition</span><span class="o">-</span><span class="n">duration</span><span class="o">:</span> <span class="m">1s</span><span class="p">;</span>
    <span class="n">transition</span><span class="o">-</span><span class="n">property</span><span class="o">:</span> <span class="k">opacity</span><span class="p">;</span>
<span class="p">}</span></code>

媒体查询

尽量将媒体查询的规则靠近与他们相关的规则,不要将他们一起放到一个独立的样式文件中,或者丢在文档的最底部,这样做只会让大家以后更容易忘记他们。

<code class="language-css" data-lang="css"><span class="nc">.element</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="nc">.element-avatar</span><span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="k">@media</span> <span class="o">(</span><span class="nt">min-width</span><span class="o">:</span> <span class="nt">480px</span><span class="o">)</span> <span class="p">{</span>
    <span class="nc">.element</span> <span class="p">{</span>
        <span class="o">...</span>
    <span class="p">}</span>

    <span class="nc">.element-avatar</span> <span class="p">{</span>
        <span class="o">...</span>
    <span class="p">}</span>
<span class="p">}</span></code>

SCSS相关

提交的代码中不要有 @debug

声明顺序:

  • @extend
  • 不包含 @content@include
  • 包含 @content@include
  • 自身属性
  • 嵌套规则

@import 引入的文件不需要开头的’_’和结尾的’.scss’;

嵌套最多不能超过5层;

@extend 中使用placeholder选择器;

去掉不必要的父级引用符号’&’。

<code class="language-css" data-lang="css"><span class="c">/* not good */</span>
<span class="k">@import</span> <span class="s2">"_dialog.scss"</span><span class="p">;</span>

<span class="c">/* good */</span>
<span class="k">@import</span> <span class="s2">"dialog"</span><span class="p">;</span>

<span class="c">/* not good */</span>
<span class="nc">.fatal</span> <span class="p">{</span>
    <span class="o">@</span><span class="n">extend</span> <span class="o">.</span><span class="n">error</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nc">.fatal</span> <span class="p">{</span>
    <span class="o">@</span><span class="n">extend</span> <span class="o">%</span><span class="n">error</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* not good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="o">&amp;</span> <span class="o">&gt;</span> <span class="o">.</span><span class="n">dialog</span> <span class="err">{</span>
        <span class="o">...</span>
    <span class="p">}</span>
<span class="err">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="o">&gt;</span> <span class="o">.</span><span class="n">dialog</span> <span class="err">{</span>
        <span class="o">...</span>
    <span class="p">}</span>
<span class="err">}</span></code>

杂项

不允许有空的规则;

元素选择器用小写字母;

去掉小数点前面的0;

去掉数字中不必要的小数点和末尾的0;

属性值’0’后面不要加单位;

同个属性不同前缀的写法需要在垂直方向保持对齐,具体参照右边的写法;

无前缀的标准属性应该写在有前缀的属性后面;

不要在同个规则里出现重复的属性,如果重复的属性是连续的则没关系;

不要在一个文件里出现两个相同的规则;

border: 0; 代替 border: none;

选择器不要超过4层(在scss中如果超过4层应该考虑用嵌套的方式来写);

发布的代码中不要有 @import

尽量少用’*’选择器。

<code class="language-css" data-lang="css"><span class="c">/* not good */</span>
<span class="nc">.element</span> <span class="p">{</span>
<span class="p">}</span>

<span class="c">/* not good */</span>
<span class="nt">LI</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nt">li</span> <span class="p">{</span>
    <span class="o">...</span>
<span class="p">}</span>

<span class="c">/* not good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">color</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">color</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="o">.</span><span class="m">5</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* not good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">width</span><span class="o">:</span> <span class="m">50.0px</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">width</span><span class="o">:</span> <span class="m">50px</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* not good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">width</span><span class="o">:</span> <span class="m">0px</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">width</span><span class="o">:</span> <span class="m">0</span><span class="p">;</span>
<span class="p">}</span>

<span class="c">/* not good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>
    <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>
    <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>

    <span class="k">background</span><span class="o">:</span> <span class="n">linear</span><span class="o">-</span><span class="n">gradient</span><span class="p">(</span><span class="n">to</span> <span class="k">bottom</span><span class="o">,</span> <span class="m">#fff</span> <span class="m">0</span><span class="o">,</span> <span class="m">#eee</span> <span class="m">100%</span><span class="p">);</span>
    <span class="k">background</span><span class="o">:</span> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">linear</span><span class="o">-</span><span class="n">gradient</span><span class="p">(</span><span class="k">top</span><span class="o">,</span> <span class="m">#fff</span> <span class="m">0</span><span class="o">,</span> <span class="m">#eee</span> <span class="m">100%</span><span class="p">);</span>
    <span class="k">background</span><span class="o">:</span> <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">linear</span><span class="o">-</span><span class="n">gradient</span><span class="p">(</span><span class="k">top</span><span class="o">,</span> <span class="m">#fff</span> <span class="m">0</span><span class="o">,</span> <span class="m">#eee</span> <span class="m">100%</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>
       <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>
            <span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">3px</span><span class="p">;</span>

    <span class="k">background</span><span class="o">:</span> <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">linear</span><span class="o">-</span><span class="n">gradient</span><span class="p">(</span><span class="k">top</span><span class="o">,</span> <span class="m">#fff</span> <span class="m">0</span><span class="o">,</span> <span class="m">#eee</span> <span class="m">100%</span><span class="p">);</span>
    <span class="k">background</span><span class="o">:</span>    <span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">linear</span><span class="o">-</span><span class="n">gradient</span><span class="p">(</span><span class="k">top</span><span class="o">,</span> <span class="m">#fff</span> <span class="m">0</span><span class="o">,</span> <span class="m">#eee</span> <span class="m">100%</span><span class="p">);</span>
    <span class="k">background</span><span class="o">:</span>         <span class="n">linear</span><span class="o">-</span><span class="n">gradient</span><span class="p">(</span><span class="n">to</span> <span class="k">bottom</span><span class="o">,</span> <span class="m">#fff</span> <span class="m">0</span><span class="o">,</span> <span class="m">#eee</span> <span class="m">100%</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* not good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">color</span><span class="o">:</span> <span class="k">rgb</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="p">);</span>
    <span class="k">width</span><span class="o">:</span> <span class="m">50px</span><span class="p">;</span>
    <span class="k">color</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="o">.</span><span class="m">5</span><span class="p">);</span>
<span class="p">}</span>

<span class="c">/* good */</span>
<span class="nc">.element</span> <span class="p">{</span>
    <span class="k">color</span><span class="o">:</span> <span class="k">rgb</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="p">);</span>
    <span class="k">color</span><span class="o">:</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="o">.</span><span class="m">5</span><span class="p">);</span>
<span class="p">}</span></code>

JavaScript

缩进

使用soft tab(4个空格)。

<code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">1</span><span class="p">,</span>
    <span class="nx">y</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>

<span class="k">if</span> <span class="p">(</span><span class="nx">x</span> <span class="o">&lt;</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">x</span> <span class="o">+=</span> <span class="mi">10</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
    <span class="nx">x</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span></code>

单行长度

不要超过80,但如果编辑器开启word wrap可以不考虑单行长度。

分号

以下几种情况后需加分号:

  • 变量声明
  • 表达式
  • return
  • throw
  • break
  • continue
  • do-while
<code class="language-javascript" data-lang="javascript"><span class="cm">/* var declaration */</span>
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>

<span class="cm">/* expression statement */</span>
<span class="nx">x</span><span class="o">++</span><span class="p">;</span>

<span class="cm">/* do-while */</span>
<span class="k">do</span> <span class="p">{</span>
    <span class="nx">x</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span> <span class="k">while</span> <span class="p">(</span><span class="nx">x</span> <span class="o">&lt;</span> <span class="mi">10</span><span class="p">);</span></code>

空格

以下几种情况不需要空格:

  • 对象的属性名后
  • 前缀一元运算符后
  • 后缀一元运算符前
  • 函数调用括号前
  • 无论是函数声明还是函数表达式,'(‘前不要空格
  • 数组的'[‘后和’]’前
  • 对象的'{‘后和’}’前
  • 运算符'(‘后和’)’前

以下几种情况需要空格:

  • 二元运算符前后
  • 三元运算符’?:’前后
  • 代码块'{‘前
  • 下列关键字前:else, while, catch, finally
  • 下列关键字后:if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof
  • 单行注释’//’后(若单行注释和代码同行,则’//’前也需要),多行注释’*’后
  • 对象的属性值前
  • for循环,分号后留有一个空格,前置条件如果有多个,逗号后留一个空格
  • 无论是函数声明还是函数表达式,'{‘前一定要有空格
  • 函数的参数之间
<code class="language-javascript" data-lang="javascript"><span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">b</span> <span class="o">:</span><span class="mi">1</span>
<span class="p">};</span>

<span class="c1">// good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">b</span><span class="o">:</span> <span class="mi">1</span>
<span class="p">};</span>

<span class="c1">// not good</span>
<span class="o">++</span> <span class="nx">x</span><span class="p">;</span>
<span class="nx">y</span> <span class="o">++</span><span class="p">;</span>
<span class="nx">z</span> <span class="o">=</span> <span class="nx">x</span><span class="o">?</span><span class="mi">1</span><span class="o">:</span><span class="mi">2</span><span class="p">;</span>

<span class="c1">// good</span>
<span class="o">++</span><span class="nx">x</span><span class="p">;</span>
<span class="nx">y</span><span class="o">++</span><span class="p">;</span>
<span class="nx">z</span> <span class="o">=</span> <span class="nx">x</span> <span class="o">?</span> <span class="mi">1</span> <span class="o">:</span> <span class="mi">2</span><span class="p">;</span>

<span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">[</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">2</span> <span class="p">];</span>

<span class="c1">// good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">];</span>

<span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">(</span> <span class="mi">1</span><span class="o">+</span><span class="mi">2</span> <span class="p">)</span><span class="o">*</span><span class="mi">3</span><span class="p">;</span>

<span class="c1">// good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">(</span><span class="mi">1</span> <span class="o">+</span> <span class="mi">2</span><span class="p">)</span> <span class="o">*</span> <span class="mi">3</span><span class="p">;</span>

<span class="c1">// no space before '(', one space before '{', one space between function parameters</span>
<span class="kd">var</span> <span class="nx">doSomething</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">c</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// do something</span>
<span class="p">};</span>

<span class="c1">// no space before '('</span>
<span class="nx">doSomething</span><span class="p">(</span><span class="nx">item</span><span class="p">);</span>

<span class="c1">// not good</span>
<span class="k">for</span><span class="p">(</span><span class="nx">i</span><span class="o">=</span><span class="mi">0</span><span class="p">;</span><span class="nx">i</span><span class="o">&lt;</span><span class="mi">6</span><span class="p">;</span><span class="nx">i</span><span class="o">++</span><span class="p">){</span>
    <span class="nx">x</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// good</span>
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="mi">6</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">x</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span></code>

空行

以下几种情况需要空行:

  • 变量声明后(当变量声明在代码块的最后一行时,则无需空行)
  • 注释前(当注释在代码块的第一行时,则无需空行)
  • 代码块后(在函数调用、数组、对象中则无需空行)
  • 文件最后保留一个空行
<code class="language-javascript" data-lang="javascript"><span class="c1">// need blank line after variable declaration</span>
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>

<span class="c1">// not need blank line when variable declaration is last expression in the current block</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">x</span> <span class="o">&gt;=</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="nx">x</span> <span class="o">+</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>

<span class="c1">// need blank line before line comment</span>
<span class="nx">a</span><span class="o">++</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">b</span><span class="p">()</span> <span class="p">{</span>
    <span class="c1">// not need blank line when comment is first line of block</span>
    <span class="k">return</span> <span class="nx">a</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// need blank line after blocks</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="mi">2</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="k">continue</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">var</span> <span class="nx">obj</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">foo</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">return</span> <span class="mi">1</span><span class="p">;</span>
    <span class="p">},</span>

    <span class="nx">bar</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="k">return</span> <span class="mi">2</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">};</span>

<span class="c1">// not need blank line when in argument list, array, object</span>
<span class="nx">func</span><span class="p">(</span>
    <span class="mi">2</span><span class="p">,</span>
    <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">a</span><span class="o">++</span><span class="p">;</span>
    <span class="p">},</span>
    <span class="mi">3</span>
<span class="p">);</span>

<span class="kd">var</span> <span class="nx">foo</span> <span class="o">=</span> <span class="p">[</span>
    <span class="mi">2</span><span class="p">,</span>
    <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">a</span><span class="o">++</span><span class="p">;</span>
    <span class="p">},</span>
    <span class="mi">3</span>
<span class="p">];</span>


<span class="kd">var</span> <span class="nx">foo</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">a</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span>
    <span class="nx">b</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">a</span><span class="o">++</span><span class="p">;</span>
    <span class="p">},</span>
    <span class="nx">c</span><span class="o">:</span> <span class="mi">3</span>
<span class="p">};</span></code>

换行

换行的地方,行末必须有’,’或者运算符;

以下几种情况不需要换行:

  • 下列关键字后:else, catch, finally
  • 代码块'{‘前

以下几种情况需要换行:

  • 代码块'{‘后和’}’前
  • 变量赋值后
<code class="language-javascript" data-lang="javascript"><span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">b</span><span class="o">:</span> <span class="mi">1</span>
    <span class="p">,</span> <span class="nx">c</span><span class="o">:</span> <span class="mi">2</span>
<span class="p">};</span>

<span class="nx">x</span> <span class="o">=</span> <span class="nx">y</span>
    <span class="o">?</span> <span class="mi">1</span> <span class="o">:</span> <span class="mi">2</span><span class="p">;</span>

<span class="c1">// good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">b</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
    <span class="nx">c</span><span class="o">:</span> <span class="mi">2</span>
<span class="p">};</span>

<span class="nx">x</span> <span class="o">=</span> <span class="nx">y</span> <span class="o">?</span> <span class="mi">1</span> <span class="o">:</span> <span class="mi">2</span><span class="p">;</span>
<span class="nx">x</span> <span class="o">=</span> <span class="nx">y</span> <span class="o">?</span>
    <span class="mi">1</span> <span class="o">:</span> <span class="mi">2</span><span class="p">;</span>

<span class="c1">// no need line break with 'else', 'catch', 'finally'</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">}</span>

<span class="k">try</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">}</span> <span class="k">finally</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">}</span>

<span class="c1">// not good</span>
<span class="kd">function</span> <span class="nx">test</span><span class="p">()</span>
<span class="p">{</span>
    <span class="p">...</span>
<span class="p">}</span>

<span class="c1">// good</span>
<span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">}</span>

<span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">a</span><span class="p">,</span> <span class="nx">foo</span> <span class="o">=</span> <span class="mi">7</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span>
    <span class="nx">c</span><span class="p">,</span> <span class="nx">bar</span> <span class="o">=</span> <span class="mi">8</span><span class="p">;</span>

<span class="c1">// good</span>
<span class="kd">var</span> <span class="nx">a</span><span class="p">,</span>
    <span class="nx">foo</span> <span class="o">=</span> <span class="mi">7</span><span class="p">,</span>
    <span class="nx">b</span><span class="p">,</span> <span class="nx">c</span><span class="p">,</span> <span class="nx">bar</span> <span class="o">=</span> <span class="mi">8</span><span class="p">;</span></code>

单行注释

双斜线后,必须跟一个空格;

缩进与下一行代码保持一致;

可位于一个代码行的末尾,与代码间隔一个空格。

<code class="language-javascript" data-lang="javascript"><span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// if you made it here, then all security checks passed</span>
    <span class="nx">allowed</span><span class="p">();</span>
<span class="p">}</span>

<span class="kd">var</span> <span class="nx">zhangsan</span> <span class="o">=</span> <span class="s1">'zhangsan'</span><span class="p">;</span> <span class="c1">// one space after code</span></code>

多行注释

最少三行, ‘*’后跟一个空格,具体参照右边的写法;

建议在以下情况下使用:

  • 难于理解的代码段
  • 可能存在错误的代码段
  • 浏览器特殊的HACK代码
  • 业务逻辑强相关的代码
<code class="language-javascript" data-lang="javascript"><span class="cm">/*</span>
<span class="cm"> * one space after '*'</span>
<span class="cm"> */</span>
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span></code>

文档注释

各类标签@param, @method等请参考usejsdocJSDoc Guide

建议在以下情况下使用:

  • 所有常量
  • 所有函数
  • 所有类
<code class="language-javascript" data-lang="javascript"><span class="cm">/**</span>
<span class="cm"> * @func</span>
<span class="cm"> * @desc 一个带参数的函数</span>
<span class="cm"> * @param {string} a - 参数a</span>
<span class="cm"> * @param {number} b=1 - 参数b默认值为1</span>
<span class="cm"> * @param {string} c=1 - 参数c有两种支持的取值&lt;/br&gt;1—表示x&lt;/br&gt;2—表示xx</span>
<span class="cm"> * @param {object} d - 参数d为一个对象</span>
<span class="cm"> * @param {string} d.e - 参数d的e属性</span>
<span class="cm"> * @param {string} d.f - 参数d的f属性</span>
<span class="cm"> * @param {object[]} g - 参数g为一个对象数组</span>
<span class="cm"> * @param {string} g.h - 参数g数组中一项的h属性</span>
<span class="cm"> * @param {string} g.i - 参数g数组中一项的i属性</span>
<span class="cm"> * @param {string} [j] - 参数j是一个可选参数</span>
<span class="cm"> */</span>
<span class="kd">function</span> <span class="nx">foo</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">c</span><span class="p">,</span> <span class="nx">d</span><span class="p">,</span> <span class="nx">g</span><span class="p">,</span> <span class="nx">j</span><span class="p">)</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">}</span></code>

引号

最外层统一使用单引号。

<code class="language-javascript" data-lang="javascript"><span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="s2">"test"</span><span class="p">;</span>

<span class="c1">// good</span>
<span class="kd">var</span> <span class="nx">y</span> <span class="o">=</span> <span class="s1">'foo'</span><span class="p">,</span>
    <span class="nx">z</span> <span class="o">=</span> <span class="s1">'&lt;div id="test"&gt;&lt;/div&gt;'</span><span class="p">;</span></code>

变量命名

  • 标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到cgi返回的数据)
  • ‘ID’在变量名中全大写
  • ‘URL’在变量名中全大写
  • ‘Android’在变量名中大写第一个字母
  • ‘iOS’在变量名中小写第一个,大写后两个字母
  • 常量全大写,用下划线连接
  • 构造函数,大写第一个字母
  • jquery对象必须以’$’开头命名
<code class="language-javascript" data-lang="javascript"><span class="kd">var</span> <span class="nx">thisIsMyName</span><span class="p">;</span>

<span class="kd">var</span> <span class="nx">goodID</span><span class="p">;</span>

<span class="kd">var</span> <span class="nx">reportURL</span><span class="p">;</span>

<span class="kd">var</span> <span class="nx">AndroidVersion</span><span class="p">;</span>

<span class="kd">var</span> <span class="nx">iOSVersion</span><span class="p">;</span>

<span class="kd">var</span> <span class="nx">MAX_COUNT</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">Person</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">body</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">);</span>

<span class="c1">// good</span>
<span class="kd">var</span> <span class="nx">$body</span> <span class="o">=</span> <span class="nx">$</span><span class="p">(</span><span class="s1">'body'</span><span class="p">);</span></code>

变量声明

一个函数作用域中所有的变量声明尽量提到函数首部,用一个var声明,不允许出现两个连续的var声明。

<code class="language-javascript" data-lang="javascript"><span class="kd">function</span> <span class="nx">doSomethingWithItems</span><span class="p">(</span><span class="nx">items</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// use one var</span>
    <span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="mi">10</span><span class="p">,</span>
        <span class="nx">result</span> <span class="o">=</span> <span class="nx">value</span> <span class="o">+</span> <span class="mi">10</span><span class="p">,</span>
        <span class="nx">i</span><span class="p">,</span>
        <span class="nx">len</span><span class="p">;</span>

    <span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">len</span> <span class="o">=</span> <span class="nx">items</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">len</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">result</span> <span class="o">+=</span> <span class="mi">10</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span></code>

函数

无论是函数声明还是函数表达式,'(‘前不要空格,但'{‘前一定要有空格;

函数调用括号前不需要空格;

立即执行函数外必须包一层括号;

不要给inline function命名;

参数之间用’, ‘分隔,注意逗号后有一个空格。

<code class="language-javascript" data-lang="javascript"><span class="c1">// no space before '(', but one space before'{'</span>
<span class="kd">var</span> <span class="nx">doSomething</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// do something</span>
<span class="p">};</span>

<span class="kd">function</span> <span class="nx">doSomething</span><span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// do something</span>
<span class="p">}</span>

<span class="c1">// not good</span>
<span class="nx">doSomething</span> <span class="p">(</span><span class="nx">item</span><span class="p">);</span>

<span class="c1">// good</span>
<span class="nx">doSomething</span><span class="p">(</span><span class="nx">item</span><span class="p">);</span>

<span class="c1">// requires parentheses around immediately invoked function expressions</span>
<span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">return</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">})();</span>

<span class="c1">// not good</span>
<span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">].</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span> <span class="nx">x</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">});</span>

<span class="c1">// good</span>
<span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">].</span><span class="nx">forEach</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">});</span>

<span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="kd">function</span> <span class="nx">a</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">}];</span>

<span class="c1">// good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">}];</span>

<span class="c1">// use ', ' between function parameters</span>
<span class="kd">var</span> <span class="nx">doSomething</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">c</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// do something</span>
<span class="p">};</span></code>

数组、对象

对象属性名不需要加引号;

对象以缩进的形式书写,不要写在一行;

数组、对象最后不要有逗号。

<code class="language-javascript" data-lang="javascript"><span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">{</span>
    <span class="s1">'b'</span><span class="o">:</span> <span class="mi">1</span>
<span class="p">};</span>

<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">{</span><span class="nx">b</span><span class="o">:</span> <span class="mi">1</span><span class="p">};</span>

<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">b</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
    <span class="nx">c</span><span class="o">:</span> <span class="mi">2</span><span class="p">,</span>
<span class="p">};</span>

<span class="c1">// good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">b</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
    <span class="nx">c</span><span class="o">:</span> <span class="mi">2</span>
<span class="p">};</span></code>

括号

下列关键字后必须有大括号(即使代码块的内容只有一行):if, else, for, while, do, switch, try, catch, finally, with

<code class="language-javascript" data-lang="javascript"><span class="c1">// not good</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span>
    <span class="nx">doSomething</span><span class="p">();</span>

<span class="c1">// good</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">doSomething</span><span class="p">();</span>
<span class="p">}</span></code>

null

适用场景:

  • 初始化一个将来可能被赋值为对象的变量
  • 与已经初始化的变量做比较
  • 作为一个参数为对象的函数的调用传参
  • 作为一个返回对象的函数的返回值

不适用场景:

  • 不要用null来判断函数调用时有无传参
  • 不要与未初始化的变量做比较
<code class="language-javascript" data-lang="javascript"><span class="c1">// not good</span>
<span class="kd">function</span> <span class="nx">test</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">b</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
        <span class="c1">// not mean b is not supply</span>
        <span class="p">...</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="kd">var</span> <span class="nx">a</span><span class="p">;</span>

<span class="k">if</span> <span class="p">(</span><span class="nx">a</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">}</span>

<span class="c1">// good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>

<span class="k">if</span> <span class="p">(</span><span class="nx">a</span> <span class="o">===</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">}</span></code>

undefined

永远不要直接使用undefined进行变量判断;

使用typeof和字符串’undefined’对变量进行判断。

<code class="language-javascript" data-lang="javascript"><span class="c1">// not good</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">person</span> <span class="o">===</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">}</span>

<span class="c1">// good</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">person</span> <span class="o">===</span> <span class="s1">'undefined'</span><span class="p">)</span> <span class="p">{</span>
    <span class="p">...</span>
<span class="p">}</span></code>

jshint

用’===’, ‘!==’代替’==’, ‘!=’;

for-in里一定要有hasOwnProperty的判断;

不要在内置对象的原型上添加方法,如Array, Date;

不要在内层作用域的代码里声明了变量,之后却访问到了外层作用域的同名变量;

变量不要先使用后声明;

不要在一句代码中单单使用构造函数,记得将其赋值给某个变量;

不要在同个作用域下声明同名变量;

不要在一些不需要的地方加括号,例:delete(a.b);

不要使用未声明的变量(全局变量需要加到.jshintrc文件的globals属性里面);

不要声明了变量却不使用;

不要在应该做比较的地方做赋值;

debugger不要出现在提交的代码里;

数组中不要存在空元素;

不要在循环内部声明函数;

不要像这样使用构造函数,例:new function () { ... }, new Object

<code class="language-javascript" data-lang="javascript"><span class="c1">// not good</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">a</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">a</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// good</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">a</span> <span class="o">===</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">a</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// good</span>
<span class="k">for</span> <span class="p">(</span><span class="nx">key</span> <span class="k">in</span> <span class="nx">obj</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">hasOwnProperty</span><span class="p">(</span><span class="nx">key</span><span class="p">))</span> <span class="p">{</span>
        <span class="c1">// be sure that obj[key] belongs to the object and was not inherited</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">obj</span><span class="p">[</span><span class="nx">key</span><span class="p">]);</span>
    <span class="p">}</span>
<span class="p">}</span>

<span class="c1">// not good</span>
<span class="nb">Array</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">count</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="mi">4</span><span class="p">;</span>
<span class="p">};</span>

<span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">if</span> <span class="p">(</span><span class="kc">true</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
    <span class="p">}</span>

    <span class="nx">x</span> <span class="o">+=</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// not good</span>
<span class="kd">function</span> <span class="nx">test</span><span class="p">()</span> <span class="p">{</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">x</span><span class="p">);</span>

    <span class="kd">var</span> <span class="nx">x</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// not good</span>
<span class="k">new</span> <span class="nx">Person</span><span class="p">();</span>

<span class="c1">// good</span>
<span class="kd">var</span> <span class="nx">person</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">();</span>

<span class="c1">// not good</span>
<span class="k">delete</span><span class="p">(</span><span class="nx">obj</span><span class="p">.</span><span class="nx">attr</span><span class="p">);</span>

<span class="c1">// good</span>
<span class="k">delete</span> <span class="nx">obj</span><span class="p">.</span><span class="nx">attr</span><span class="p">;</span>

<span class="c1">// not good</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">a</span> <span class="o">=</span> <span class="mi">10</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">a</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="p">,</span> <span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">];</span>

<span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">nums</span> <span class="o">=</span> <span class="p">[];</span>

<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="mi">10</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
    <span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">i</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">nums</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">j</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="nx">i</span> <span class="o">+</span> <span class="nx">j</span><span class="p">;</span>
        <span class="p">};</span>
    <span class="p">}(</span><span class="nx">i</span><span class="p">));</span>
<span class="p">}</span>

<span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">singleton</span> <span class="o">=</span> <span class="k">new</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">privateVar</span><span class="p">;</span>

    <span class="k">this</span><span class="p">.</span><span class="nx">publicMethod</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">privateVar</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
    <span class="p">};</span>

    <span class="k">this</span><span class="p">.</span><span class="nx">publicMethod2</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">privateVar</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
    <span class="p">};</span>
<span class="p">};</span></code>

杂项

不要混用tab和space;

不要在一处使用多个tab或space;

换行符统一用’LF’;

对上下文this的引用只能使用’_this’, ‘that’, ‘self’其中一个来命名;

行尾不要有空白字符;

switch的falling through和no default的情况一定要有注释特别说明;

不允许有空的代码块。

<code class="language-javascript" data-lang="javascript"><span class="c1">// not good</span>
<span class="kd">var</span> <span class="nx">a</span>   <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">Person</span><span class="p">()</span> <span class="p">{</span>
    <span class="c1">// not good</span>
    <span class="kd">var</span> <span class="nx">me</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>

    <span class="c1">// good</span>
    <span class="kd">var</span> <span class="nx">_this</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>

    <span class="c1">// good</span>
    <span class="kd">var</span> <span class="nx">that</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>

    <span class="c1">// good</span>
    <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
<span class="p">}</span>

<span class="c1">// good</span>
<span class="k">switch</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">case</span> <span class="mi">1</span><span class="o">:</span>
    <span class="k">case</span> <span class="mi">2</span><span class="o">:</span>
        <span class="p">...</span>
        <span class="k">break</span><span class="p">;</span>
    <span class="k">case</span> <span class="mi">3</span><span class="o">:</span>
        <span class="p">...</span>
    <span class="c1">// why fall through</span>
    <span class="k">case</span> <span class="mi">4</span>
        <span class="p">...</span>
        <span class="k">break</span><span class="p">;</span>
    <span class="c1">// why no default</span>
<span class="p">}</span>

<span class="c1">// not good with empty block</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">condition</span><span class="p">)</span> <span class="p">{</span>

<span class="p">}</span></code>

编辑器配置和构建检查

sublime3插件

  1. 安装node包

    • jscs npm install jscs -g
    • jshint npm install jshint -g
    • csscomb npm install csscomb -g
    • csslint npm install csslint -g
  2. 安装gem包

    • scss-lint gem install scss_lint
  3. 安装sublime3 Package Control

    • 按下 ctrl+`
    • 复制粘贴以下代码 import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
  4. 安装sublime3插件

    • 按下 ctrl+shift+p,输入’ip’(Install Package)
    • 输入以下插件的名字,按顺序逐个进行安装:

      • EditorConfig
      • Sass
      • SublimeLinter
      • SublimeLinter-jscs
      • SublimeLinter-jshint
      • SublimeLinter-csslint
      • SublimeLinter-contrib-scss-lint
      • JSFormat
      • CSScomb
  5. 插件的配置文件

    将以下配置文件分别下载后放入项目根目录下:

    • EditorConfig 配置文件
    • JSCS 配置文件
    • JSHint 配置文件

      注意:全局变量需要手动加到配置文件的globals属性里,例:

      <code class="language-json" data-lang="json"><span class="p">{</span>
          <span class="nt">"globals"</span><span class="p">:</span> <span class="p">{</span>
              <span class="nt">"ImageHandle"</span><span class="p">:</span> <span class="kc">true</span>
          <span class="p">}</span>
      <span class="p">}</span></code>
    • CSSLint 配置文件
    • SCSS-Lint 配置文件
  6. 编辑器及插件设置

    • sublime3 自身

      Preferences->Setting-User,增加下面两个配置:

      <code class="language-json" data-lang="json"><span class="p">{</span>
          <span class="nt">"translate_tabs_to_spaces"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
          <span class="nt">"word_wrap"</span><span class="p">:</span> <span class="kc">true</span>
      <span class="p">}</span></code>

      点击右下角的Spaces->Convert Indentation to Spaces可以将文件中的所有tab转换成空格

    • JSFormat

      Preferences->Package Settings->JSFormat->Setting-User,下载配置文件覆盖

      配置好后格式化的默认快捷键是 ctrl+alt+f

    • SublimeLinter

      右键->SublimeLinter->Lint Mode,有4种检查模式,建议选择 Load/save

      右键->SublimeLinter->Mark Style,建议选择 Outline

      右键->SublimeLinter->Choose Gutter Theme,建议选择 Blueberry-round

      右键->SublimeLinter->Open User Settings,将linter里面jscs的args改成 ["--verbose"],将linter里面csslint的ignore改成 "box-model,adjoining-classes,box-sizing,compatible-vendor-prefixes,gradients,text-indent,fallback-colors,star-property-hack,underscore-property-hack,bulletproof-font-face,font-faces,import,regex-selectors,universal-selector,unqualified-attributes,overqualified-elements,duplicate-background-images,floats,font-sizes,ids,important,outline-none,qualified-headings,unique-headings"

      当光标处于有错误的代码行时,详细的错误信息会显示在下面的状态栏中

      右键->SublimeLinter可以看到所有的快捷键,其中 ctrl+k, a 可以列出所有错误

    • CSScomb

      Preferences->Package Settings->CSScomb->Setting-User,下载配置文件覆盖

      配置好后格式化的默认快捷键是 ctrl+shift+c

grunt插件

  1. 在项目中安装grunt插件

    • jscs npm install grunt-jscs --save-dev
    • jshint npm install grunt-contrib-jshint --save-dev
    • csslint npm install grunt-contrib-csslint --save-dev
    • scss-lint npm install grunt-scss-lint --save-dev
  2. 插件的配置文件

    • JSCS

      <code class="language-javascript" data-lang="javascript"><span class="p">{</span>
          <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
              <span class="nx">config</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
              <span class="nx">verbose</span><span class="o">:</span> <span class="kc">true</span>
          <span class="p">},</span>
          <span class="nx">files</span><span class="o">:</span> <span class="p">{</span>
              <span class="nx">src</span><span class="o">:</span> <span class="p">[...]</span>
          <span class="p">}</span>
      <span class="p">}</span></code>
    • JSHint

      <code class="language-javascript" data-lang="javascript"><span class="p">{</span>
          <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
              <span class="nx">jshintrc</span><span class="o">:</span> <span class="kc">true</span>
          <span class="p">},</span>
          <span class="nx">files</span><span class="o">:</span> <span class="p">{</span>
              <span class="nx">src</span><span class="o">:</span> <span class="p">[...]</span>
          <span class="p">}</span>
      <span class="p">}</span></code>
    • CSSLint

      <code class="language-javascript" data-lang="javascript"><span class="p">{</span>
          <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
              <span class="nx">csslintrc</span><span class="o">:</span> <span class="s1">'.csslintrc'</span>
          <span class="p">},</span>
          <span class="nx">files</span><span class="o">:</span> <span class="p">{</span>
              <span class="nx">src</span><span class="o">:</span> <span class="p">[...]</span>
          <span class="p">}</span>
      <span class="p">}</span></code>
    • SCSS-Lint

      <code class="language-javascript" data-lang="javascript"><span class="p">{</span>
          <span class="nx">options</span><span class="o">:</span> <span class="p">{</span>
              <span class="nx">config</span><span class="o">:</span> <span class="s1">'.scss-lint.yml'</span>
          <span class="p">},</span>
          <span class="nx">files</span><span class="o">:</span> <span class="p">{</span>
              <span class="nx">src</span><span class="o">:</span> <span class="p">[...]</span>
          <span class="p">}</span>
      <span class="p">}</span></code>