如果你能认真读完此文，将对你收益匪浅！

目录

• 初衷
• 文件/资源命名
• html
• css
• JavaScript
• 编辑器插件和配置文件

初衷

1. 不管参与项目的人数有多少，确保每一行代码都像是同一个人编写的;
2. 根据实际情况制定良好的代码规范；
3. 遵守编码风格使代码更容易维护，对长期项目大有裨益；
4. 实施代码规范增加代码可读性，提高协作开发效率；
5. 实施代码规范减少低级 bug 的出现概率；
6. 提供相关工具（插件），保障代码规范的无缝接入。

1、文件/资源命名

——1.1 通用规则

• 在 web 项目中，所有的文件名应该都遵循同一命名约定，使用语义化的文件命名，文件名要能“望文生义”，尽量避免使用拼音；
• 文件名只使用字母 a-z，数字 0-9，连字符 -，下划线 _ 和句点 .；
• 文件命名以字母开头而不是数字，而以特殊字符开头命名的文件，一般都有特殊的含义与用处；
• 文件名中字母全部采用小写，多个单词用下划线分隔（识别效率较驼峰体高）；
• 如需缩写单词，则应使用约定俗成的缩写形式，如 btn、nav、num、img 等，不能自造单词，以免引起歧义。

——1.2 目录命名

参照文件命名通用规则。
要合理将文件分类到不同目录，避免一个目录下存放大量的文件。

——1.3 html文件命名

参照文件命名通用规则

——1.4 css,SCSS,LESS文件命名

参照文件命名通用规则。
压缩版本的 css 文件，文件名后面需加上 .min 后缀。

——1.5 JAVASCRIPT 文件命名

参照文件命名通用规则。
压缩版本的 JavaScript 文件，文件名后面需加上 .min 后缀。

——1.6 图片命名

参照文件命名通用规则。

• 图标类图片，需在文件名前面加上 ico_ 前缀。
• 背景类图片，需在文件名前面加上 bg_ 前缀。
• 雪碧图图片，需在文件名后面加上 _sprite 后缀。
• Retina 图片，需在文件名后面加上 _1x 或 _2x 后缀来标记原图和 2 倍图。

2、html

——2.1 通用规则

• 尽量遵循 html 标准和语义，但是不应该以浪费实用性作为代价；
• 任何时候都要用尽量小的复杂度和尽量少的标签来解决问题；
• 不要使用 HTML5 规范中已经被废弃的标签；
• 使用 label 包裹附加文字的表单输入框(radio、checkbox)；
• 标签名全小写；
• 属性名全小写，用中划线做分隔符；
• 属性值使用双引号，不要使用单引号；
• 不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可忽略的）。

Check me

2018-04-30
GitHub

Check me

2018-04-30
GitHub

——2.2 缩进

• 缩进使用 1 个 Tab（占 2 个空格宽度）；
• 除 head 和 body 外，嵌套的节点应该缩进；
• 每个块级、列表、表格元素单独占一行，每个子元素都相对父元素缩进；
• 坚决不要使用 Tab 和空格混搭的缩进方式。
• 使用 Tab 缩进比空格缩进有哪些优势？
• 空格缩进一般通过键入 2 或 4 个空格来缩进对齐，其按键成本比 Tab 高得多（有些 IDE 可以设置空格宽度），使用 Tab 缩进更快捷；
• 使用 Shift + Tab 组合键可以选取多行向前缩进，使用空格缩进做不到；
• Tab 可以替换，在支持正则搜索的编辑器里，使用 \t 可以匹配搜索全部 Tab，空格缩进做不到。

Welcome to jion our big family.

——2.3 文档头

• 页面开头必须有文档头声明，推荐使用 HTML5 简单的 doctype 声明来启用标准模式，使页面在每个浏览器中尽可能一致的展现。
• 按照惯例，doctype 应大写。

——2.4 字符编码

• 在 HTML 中指定字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式。
• 字符编码通常设为 UTF-8 。

——2.5 渲染模式

• 指定使用本地最高版本的 IE 来渲染页面。
• 对于国内常见的双核浏览器，指定优先采用极速模式（webkit 内核）来渲染页面。（目前仅 360 浏览器支持）

——2.6 CSS 和 JAVASCRIPT 文件引入

• 无需为引入的 CSS 和 JavaScritp 指明 type 属性（在 HTML5 规范中，text/css 和 text/javascript 分别是他们的默认值，省略后对页面无影响）；
• 通常引入的 CSS 文件放在 内；
• 一般情况下，JavaScript 脚本应放在页面底部， 标签前面，以免阻塞页面加载，同时也避免了文档加载完成前 js 无法获取 DOM 元素的问题。

——2.7 属性顺序

• HTML 属性应当按照特定的顺序依次排列，确保代码的易读性和可维护性。
• Class 用于标识高度可复用组件，因此应该排在首位；id 用于标识具体组件，排在第二位。

——2.8 BOOLEAN 属性

• HTML5 规范中，boolean 属性不需要声明属性值。
• Boolean 属性的存在表示取值为 true，不存在则表示取值为 false。

1

1

3、CSS

—— 3.1通用规则

• 代码风格上要以具有可读性、可维护性为基本原则，压缩代码的工作交给工具去做；
• css 文件使用无 BOM 的 UTF-8 编码；
• 不允许有空的规则；
• 元素选择器用小写字母；
• 不要在一个文件里出现两个相同的规则；
• 不允许驼峰命名多个字母用短杠分割
• 每个属性声明末尾都要加分号。

.style {} /*– Not good –*/<br /><br /><br /><br /><br /><br /> UL > LI {font-size: 18px;} /*– Not good –*/<br /><br /><br /><br /><br /><br /> ul > li {font-size: 18px;} /*– Good –*/<br /><br /><br /><br /><br /><br /> .style {color: red} /*– Not good –*/<br /><br /><br /><br /><br /><br /> .style {color: red;} /*– Good –*/

——3.2 缩进

与 HTML 缩进方式一样，缩进使用 1 个 Tab（占 2 个空格宽度

——3.3 空格

• 属性值前，即属性名的 : 后加空格；
• 多个规则的分隔符 , 后加空格；
• 选择器 >、+、~ 前后加空格；
• { 前加空格；
• !important 的 ! 前加空格；
• @else 前后加空格；
• 属性值中的 , 后加空格；
• SCSS 中的运算符前后要加空格；
• 每行行末不要有多余的空格。

/* Not good */<br /><br /><br /><br /><br /><br /> .style {<br /><br /><br /><br /><br /><br /> color :red! important;<br /><br /><br /><br /><br /><br /> background-color: rgba(0,0,0,.5);<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* Good */<br /><br /><br /><br /><br /><br /> .style {<br /><br /><br /><br /><br /><br /> color: red !important;<br /><br /><br /><br /><br /><br /> background-color: rgba(0, 0, 0, .5);<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* Not good */<br /><br /><br /><br /><br /><br /> .style ,<br /><br /><br /><br /><br /><br /> .box{<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* Good */<br /><br /><br /><br /><br /><br /> .style,<br /><br /><br /><br /><br /><br /> .box {<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* Not good */<br /><br /><br /><br /><br /><br /> .box>.style {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* Good */<br /><br /><br /><br /><br /><br /> .box > .style {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* Not good */<br /><br /><br /><br /><br /><br /> .style{<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* Good */<br /><br /><br /><br /><br /><br /> .style {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* Not good */<br /><br /><br /><br /><br /><br /> @if($variable*2>10){<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }@else{<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* Good */<br /><br /><br /><br /><br /><br /> @if ($variable * 2 > 10) {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> } @else {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }

——3.4 换行

• { 后和 } 前要换行，如果只有一条属性则例外，无需换行；
• 每个属性独占一行；
• 多个选择器的分隔符 , 后要换行；
• 相邻的两段样式之间要用一个空行隔开；
• 属性组之间需要有一个空行隔开。属性分组规范请参阅“声明顺序”部分。

/* Not good */<br /><br /><br /><br /><br /><br /> .style<br /><br /><br /><br /><br /><br /> {color: red; background-color: black;}<br /><br /><br /><br /><br /><br /> /* Good */<br /><br /><br /><br /><br /><br /> .style {<br /><br /><br /><br /><br /><br /> color: red;<br /><br /><br /><br /><br /><br /> background-color: black;<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* Not good */<br /><br /><br /><br /><br /><br /> .style {<br /><br /><br /><br /><br /><br /> width: 100px;<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* Good */<br /><br /><br /><br /><br /><br /> .style {width: 100px;}<br /><br /><br /><br /><br /><br /> /* Not good */<br /><br /><br /><br /><br /><br /> .container, .form-box {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* Good */<br /><br /><br /><br /><br /><br /> .container,<br /><br /><br /><br /><br /><br /> .form-box {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }

——3.5 引号

• 最外层统一使用双引号；
• 属性选择器中的属性值要用引号；
• font-family 中含有空格的字体名需要加引号；
• url 的内容要用引号。
• CSS url 的内容加引号有什么好处？
• 降低内容路径被 XSS 注入攻击的风险；
• 避免一些浏览器兼容问题。

.style:before {<br /><br /><br /><br /><br /><br /> content: “”;<br /><br /><br /><br /><br /><br /> background-image: url(“logo.png”);<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> li[data-type=”single”] {<br /><br /><br /><br /><br /><br /> font-size: 18px;<br /><br /><br /><br /><br /><br /> font-family: “Segoe UI”, “Microsoft Yahei”;<br /><br /><br /><br /><br /><br /> }

——3.6 注释

• 注释使用 / 注释内容 /；
• SCSS 中单行注释用 // 注释内容，不会输出到编译后的 CSS 中；
• 如果希望将 SCSS 中的注释保留输出（即使在 compressed 输出模式下），则使用 /! 注释内容 /；
• 注释的缩进与下一行代码保持一致；
• / 之后、/ 之前和 // 之后要加一个空格；
• // 写在代码右侧时，其与左侧代码间隔 2 个空格。
• 注： // 注释只用于 SCSS 中。

/* Modal header */<br /><br /><br /><br /><br /><br /> .modal-header {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /*<br /><br /><br /><br /><br /><br /> * Modal header<br /><br /><br /><br /><br /><br /> */<br /><br /><br /><br /><br /><br /> .modal-header {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> .modal-header {<br /><br /><br /><br /><br /><br /> /* 150px = left + right */<br /><br /><br /><br /><br /><br /> width: 150px;<br /><br /><br /><br /><br /><br /> &.wide { // 宽屏模式<br /><br /><br /><br /><br /><br /> width: 300px;<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> }

——3.7 命名

• 命名要符合语义，尽量避免使用拼音（约定俗成的除外，例如 youku）、无意义或理解困难、易产生歧义的字符；
• Class 类名使用小写字母，以中划线分隔；
• 仅当作 js 中选择器使用的 class 类名，加上 js- 前缀；
• SCSS 中的变量和 placeholder 使用小写字母，中划线分隔；
• id 采用小驼峰式命名；
• SCSS 中的函数、混合采用小驼峰式命名。

/* Not good */<br /><br /><br /><br /><br /><br /> .b { … }<br /><br /><br /><br /><br /><br /> .yonghu-list { … }<br /><br /><br /><br /><br /><br /> .spcart { … }<br /><br /><br /><br /><br /><br /> /* Good */<br /><br /><br /><br /><br /><br /> .btn { … }<br /><br /><br /><br /><br /><br /> .user-list { … }<br /><br /><br /><br /><br /><br /> .shopping-cart { … }<br /><br /><br /><br /><br /><br /> /* class */<br /><br /><br /><br /><br /><br /> .element-content {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* id */</p><br /><br /><br /><br /><br /> <p>#myDialog {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* SCSS 变量 */<br /><br /><br /><br /><br /><br /> $color-black: #000;<br /><br /><br /><br /><br /><br /> /* SCSS placeholder */<br /><br /><br /><br /><br /><br /> %dialog-border {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* SCSS 函数 */<br /><br /><br /><br /><br /><br /> @function pxToRem($px) {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* SCSS 混合 */<br /><br /><br /><br /><br /><br /> @mixin centerBlock {<br /><br /><br /><br /><br /><br /> …<br /><br /><br /><br /><br /><br /> }

——3.8 声明顺序

推荐的样式编写顺序依次为：

1. Positioning（定位）
2. Box model（盒模型）
3. Typographic（排版）
4. Visual（视觉）
5. Misc（杂项）

.declaration-order {<br /><br /><br /><br /><br /><br /> /* Positioning */<br /><br /><br /><br /><br /><br /> position: absolute;<br /><br /><br /><br /><br /><br /> top: 0;<br /><br /><br /><br /><br /><br /> right: 0;<br /><br /><br /><br /><br /><br /> bottom: 0;<br /><br /><br /><br /><br /><br /> left: 0;<br /><br /><br /><br /><br /><br /> z-index: 100;<br /><br /><br /><br /><br /><br /> /* Box model */<br /><br /><br /><br /><br /><br /> display: block;<br /><br /><br /><br /><br /><br /> float: right;<br /><br /><br /><br /><br /><br /> width: 100px;<br /><br /><br /><br /><br /><br /> height: 100px;<br /><br /><br /><br /><br /><br /> /* Typography */<br /><br /><br /><br /><br /><br /> font: normal 13px “Helvetica Neue”, sans-serif;<br /><br /><br /><br /><br /><br /> line-height: 1.5;<br /><br /><br /><br /><br /><br /> color: #333;<br /><br /><br /><br /><br /><br /> text-align: center;<br /><br /><br /><br /><br /><br /> /* Visual */<br /><br /><br /><br /><br /><br /> background-color: #f5f5f5;<br /><br /><br /><br /><br /><br /> border: 1px solid #e5e5e5;<br /><br /><br /><br /><br /><br /> border-radius: 3px;<br /><br /><br /><br /><br /><br /> /* Misc */<br /><br /><br /><br /><br /><br /> opacity: 1;<br /><br /><br /><br /><br /><br /> }

——3.9 简写和省略

• 颜色 16 进制用小写字母，可以简写的要简写；
• 根据实际情况选择属性的简写方式；
• 属性值如果是类似 0.x 的小数，则省略小数点前的 0；
• 属性值如果是 0，则省略单位。

/* Not good */<br /><br /><br /><br /><br /><br /> .style {color: #333333;}<br /><br /><br /><br /><br /><br /> .style {padding: 0.5em 1em 0.5em 1em;}<br /><br /><br /><br /><br /><br /> .style {margin: 0px 0px 0px 10px;}<br /><br /><br /><br /><br /><br /> /* Good */<br /><br /><br /><br /><br /><br /> .style {color: #333;}<br /><br /><br /><br /><br /><br /> .style {padding: .5em 1em;}<br /><br /><br /><br /><br /><br /> .style {margin: 0 0 0 10px;}

——3.10

前缀属性

• 同个属性不同前缀的写法需要在垂直方向保持对齐，具体参照示例的写法；
• 无前缀的标准属性应该写在有前缀的属性后面。
• 如非必要，尽量不要手写前缀属性，推荐使用自动化工具来处理，例如：autoprefixer。

/* Not good */<br /><br /><br /><br /><br /><br /> .style {<br /><br /><br /><br /><br /><br /> user-select: none;<br /><br /><br /><br /><br /><br /> -webkit-user-select: none;<br /><br /><br /><br /><br /><br /> -moz-user-select: none;<br /><br /><br /><br /><br /><br /> -ms-user-select: none;<br /><br /><br /><br /><br /><br /> }<br /><br /><br /><br /><br /><br /> /* Good */<br /><br /><br /><br /><br /><br /> .style {<br /><br /><br /><br /><br /><br /> -webkit-user-select: none;<br /><br /><br /><br /><br /><br /> -moz-user-select: none;<br /><br /><br /><br /><br /><br /> -ms-user-select: none;<br /><br /><br /><br /><br /><br /> user-select: none;<br /><br /><br /><br /><br /><br /> }

——3.11

杂项

• 如果样式表文件中包含汉字（注释）或其他 Unicode 字符，建议在第一行加上 @UTF-8 字符集声明，避免乱码；
• 后代选择、子选择器不要超过 4 层；
• 慎用 !important；
• 尽量少用 * 选择器。

未完待续…