Web前端代码规范 v1.0 Beta

文件/资源命名

通用规则

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

					
						/* Not good */
						xinzengyonghu.jsp
						8926376.png
						CITYNAMES.json
						1001-scripts.js
						MyHome.php
						npld.css
						
						/* Good */
						my_file_name.html
						man-made_list.html  // man-made 是一个连字符单词

目录命名

参照文件命名通用规则。

要合理将文件分类到不同目录，避免一个目录下存放大量的文件。

HTML文件命名

参照文件命名通用规则。

CSS, SCSS 文件命名

参照文件命名通用规则。

以下划线 _ 开头的 SCSS 文件不会被编译成一个 CSS 文件。

压缩版本的 CSS 文件，文件名后面需加上 .min 后缀。

					
						basic_layout.css
						_mixin.scss
						common.min.css

JavaScript 文件命名

参照文件命名通用规则。

压缩版本的 JavaScript 文件，文件名后面需加上 .min 后缀。

					
						format_string.js
						public.min.js

图片命名

参照文件命名通用规则。

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

					
						ico_user_default.png
						bg_login_poster.jpg
						ico_station_rank_sprite.png
						ico_tools_1x.png
						ico_tools_2x.png

HTML

通用规则

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

					
					
						<!-- Not good -->
						<center class="header">...</center>
						<input type="checkbox"> Remeber me
						<DIV CLASS="my-style">...</DIV>
						<span data-fmtDate="1507593600000">2017-10-10</span>
						<a href='http://github.com'>GitHub</a>
						<input type="text" />
						
						<!-- Good -->
						<header class="header">...</header>
						<label><input type="checkbox"> Remeber me</label>
						<div class="my-style">...</div>
						<span data-fmt-date="1507593600000">2017-10-10</span>
						<a href="http://github.com">GitHub</a>
						<input type="text">

缩进

缩进使用 1 个 Tab（占 4 个空格宽度）；
除 head 和 body 外，嵌套的节点应该缩进；
每个块级、列表、表格元素单独占一行，每个子元素都相对父元素缩进；
坚决不要使用 Tab 和空格混搭的缩进方式。

使用 Tab 缩进比空格缩进有哪些优势？

空格缩进一般通过键入 2 或 4 个空格来缩进对齐，其按键成本比 Tab 高得多（有些 IDE 可以设置空格宽度），使用 Tab 缩进更快捷；
使用 Shift + Tab 组合键可以选取多行向前缩进，使用空格缩进做不到；
Tab 可以替换，在支持正则搜索的编辑器里，使用 \t 可以匹配搜索全部 Tab，空格缩进做不到。

					
					
						<!DOCTYPE html>
						<html>
						<head>
						    <title>Page title</title>
						</head>
						<body>
						    <img src="images/company_logo.png" alt="Company">
						    <h1 class="class-name" data-tip="slogan">Hello, world!</h1>
						</body>
						</html>

文档头

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

按照惯例，doctype 应大写。

					
					
						<!DOCTYPE html>
						<html>
						    ...
						</html>

字符编码

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

字符编码通常设为 UTF-8 。

					
					
						<!DOCTYPE html>
						<html>
						<head>
						    <meta charset="UTF-8">
						</head>
						    ...
						</html>

渲染模式

指定使用本地最高版本的 IE 来渲染页面。

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

					
					
						<!DOCTYPE html>
						<html>
						<head>
						    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
						    <meta name="renderer" content="webkit">
						</head>
						    ...
						</html>

CSS 和 JavaScript 文件引入

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

					
					
						<!DOCTYPE html>
						<html>
						<head>
						    <link rel="stylesheet" href="my_style.css">
						    <style>
						        ...
						    </style>
						</head>
						<body>
						    ...
						    <script src="my_script.js"></script>
						    <script>
						        ...
						    </script>
						</body>
						</html>

属性顺序

HTML 属性应当按照特定的顺序依次排列，确保代码的易读性和可维护性。

Class 用于标识高度可复用组件，因此应该排在首位；id 用于标识具体组件，排在第二位。

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

Boolean 属性

HTML5 规范中，boolean 属性不需要声明属性值。

Boolean 属性的存在表示取值为 true，不存在则表示取值为 false。

					
					
						<input type="text" disabled="disabled">  <!-- Not good -->
						<input type="text" disabled>  <!-- Good -->
						
						<input type="text" readonly="true">  <!-- Not good -->
						<input type="text" readonly>  <!-- Good -->
						
						<input type="checkbox" checked="checked">  <!-- Not good -->
						<input type="checkbox" checked>  <!-- Good -->
						
						<!-- Not good -->
						<select>
						    <option value="1" selected="selected">1</option>
						</select>
						<!-- Good -->
						<select>
						    <option value="1" selected>1</option>
						</select>
						
						<audio src="my_voice.mp3" controls="controls">  <!-- Not good -->
						<audio src="my_voice.mp3" controls>  <!-- Good -->

CSS, SCSS

通用规则

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

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

缩进

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

					
					
						.style {
						    width: 100px;
						    height: 80px;
						}

空格

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

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

换行与空行

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

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

引号

最外层统一使用双引号；
属性选择器中的属性值要用引号；
font-family 中含有空格的字体名需要加引号；
url 的内容要用引号。

CSS url 的内容加引号有什么好处？

降低内容路径被 XSS 注入攻击的风险；
避免一些浏览器兼容问题。

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

注释

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

注： // 注释只用于 SCSS 中。

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

命名

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

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

声明顺序

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

Positioning（定位）
Box model（盒模型）
Typographic（排版）
Visual（视觉）
Misc（杂项）

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

简写和省略

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

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

前缀属性

同个属性不同前缀的写法需要在垂直方向保持对齐，具体参照示例的写法；
无前缀的标准属性应该写在有前缀的属性后面。

如非必要，尽量不要手写前缀属性，推荐使用自动化工具来处理，例如：autoprefixer。

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

杂项

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

JavaScript

通用规则

代码是写给人看的，代码排版要顾及可读性、可维护性；
代码尽量放在 .js 文件中，页面只放当前页面专用的 JS 代码；
js 文件使用无 BOM 的 UTF-8 编码；
代码中必须包含必要的注释；
不允许有空的代码块；
行尾不要有空白字符。

缩进

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

					
					
						var x = 1,
						    y = 1;
						
						if (x === y) {
						    ...
						} else {
						    ...
						}

空格

运算符前后要加空格：+, -, *, /, %, =, <, >等；
代码块 { 前要加空格
下列关键字前后都需要加空格：else, catch, finally；
下列关键字后需要加空格：if, for, while, do, switch, case, try, return, typeof；
下列逻辑运算符前后需要加空格：&&, ||；
三元运算符 ?, : 前后需要加空格；
对象的属性值前需要加空格；
for 循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格；
函数的参数之间要加空格；
一元运算符的符号前后不要加空格；
调用函数的 ( 前不要加空格。

					
					
						if (x && x === y) {
						    x++;
						} else {
						    z = x < 10 ? '0' + x : x;
						}
						
						var a = {
						    b: 'string',
						    c: function() {
						        ...
						    }
						};
						
						var arr = [1, 2, 3];
						
						for (var i = 0, len = arr.length; i < len; i++) {
						    ...
						}
						
						function doSomething(a, b, c) {
						    foo();
						    ...
						}

换行与空行

代码块 { 后和 } 前要换行；
变量赋值后要换行，如同时赋值多个变量，且赋给变量初始值时，则 , 后要换行；
同一行的代码过长时要考虑换行，具体换行规则如下：
- jQuery 的链式调用，在 jQuery 方法的 . 前换行；
- 逻辑运算语句换行时，运算符必须在新行的行首；
- 三元运算语句换行时，在 ? 后换行。
变量声明后要空一行（当变量声明在代码块的最后一行时，则无需空行）；
代码块后要空一行（在函数调用、数组、对象中则无需空行）。

					
					
						var x = 1,
						    y = 1,
						    a, b, c;
						
						(function($) {
						    $('#elementId').find('.a-very-long-name-sub-element')
						        .css({
						            color: 'red',
						            fontSize: '18px'
						        })
						        .fadeIn(300);
						})(jQuery);
						
						var iHaveVeryLongName = 
						    ((a && b) || (b && c) || (a && c)) ?
						    x + y : x - y;

分号

变量声明之后要加分号；
表达式之后要加分号；
return 语句末尾要加分号；
throw 语句末尾要加分号；
break 后面要加分号；
continue 后面要加分号；
do-while 语句末尾要加分号。

					
					
						var x = 1;
						
						for (var i = 0; i < 10; i++) {
						    x++;
						    if (x % 2 === 0) {
						        ...
						        continue;
						    }
						}

引号

最外层统一使用单引号。

不但比双引号输入更快捷（不用按 Shift 键），而且在插入 HTML 片段时好处十分明显。

					
					
						var x = 'string text';
						
						var html = 
						    '<div class="box">' +
						        '<h1>Title</h1>' +
						        '<p>Hello World!</p>' +
						    '</div>';

括号

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

					
					
						/* Not good */
						if (conditions)
						    return true;
						
						/* Good */
						if (conditions) {
						    return true;
						}

代码注释

JavaScript 的注释有两种 // 注释内容 和 /* 注释内容 */：
- // 注释内容 用于单行代码注释；
- /* 注释内容 */ 常用作代码段的注释，或较正式的声明中，如函数、业务功能等的描述中。
/* 之后、*/ 之前和 // 之后要加一个空格；
// 写在代码右侧时，其与左侧代码间隔 2 个空格。

					
					
						var a = true;  // 同行注释
						
						// 顶格写的单行注释
						var elm = ((a && b) || (b && c)) ? x + y : x - y;
						
						/**
						 * function name
						 * @desc 一个带参数的高大上函数
						 * @param {string} a - 参数 a
						 * @param {number} b - 参数 b，默认值为1
						 * @param {string} c - 参数 c 有两种支持的取值
    x - 表示情况1
    y - 表示情况2
						 * @param {object} d - 参数 d 为一个对象
						 * @param {object[]} e - 参数 e 为一个对象数组
						 * @param {boolean} [f] - 参数 f 是一个可选参数
						 * @return {array} - 返回一个数组
						 */
						function foo(a, b, c, d, e, f) {
						    ...
						}

变量命名

命名要符合语义，尽量避免使用拼音（约定俗成的除外，例如 youku）、无意义或理解困难、易产生歧义的字符；
标准变量采用小驼峰式命名（第一个字母小写）；
不要使用 JavaScript 中的关键字和保留字；
不要使用未声明的变量（会变成全局变量，引起意想不到的后果）；
尽量不用全局变量；
全局变量、常量全大写，用下划线连接；
上下文中的 this 引用，请使用 _this、that 或 self 中的一个来命名；
jQuery 对象必须以 $ 开头命名；
一些常见的英文单词：
- 字符 ID 在变量名中全大写；
- 字符 URL 在变量名中全大写；
- 字符 Android 在变量名中大写第一个字母；
- 字符 iOS 在变量名中小写第一个，大写后两个字母。

					
					
						var thisIsMyName;
						
						var goodID;
						
						var reportURL;
						
						var AndroidVersion;
						
						var iOSVersion;
						
						var MAX_COUNT = 10;
						
						var self = this;
						
						var $body = $('body');

函数

无论是函数声明还是函数表达式，( 前不要空格，但 { 前一定要有空格；
函数参数之间用 , 分隔，注意逗号后有一个空格；
函数名采用小驼峰式命名（第一个字母小写）；
构造函数，大写第一个字母；
私有函数（方法），命名以下划线 _ 开头；
函数名应使用动宾短语，即动词开头的短语，常用动词如下：
- 进行：do
- 新增：add
- 删除：del
- 编辑：edit
- 查询：query
- 查看：view
- 获取：get
- 设置：set
- 构建：build
- 校验：check
- 确认：confirm
- 保存：save

					
					
						
						/* Not good */
						function UserList (a,b){
						    ...
						}
						
						/* Good */
						function buildUserList(a, b) {
						    ...
						}
						
						/* Not good */
						doSomething (item);
						
						/* Good */
						doSomething(item);
						
						function SetPerson(name){
						    this.name = name;
						}
						var people = new SetPerson('王大锤');

对象

对象属性名不需要加引号；
对象以缩进的形式书写，不要写在一行；
对象最后一项末尾不要有逗号。

					
					
						/* Not good */
						var a = {
						    'b': 1,
						    'c': 2,
						};
						
						var a = {b: 1, c: 2};
						
						/* Good */
						var a = {
						    b: 1,
						    c: 2
						};

null

适用场景：

初始化一个将来可能被赋值为对象的变量；
与已经初始化的变量做比较；
标记一个不再被使用的变量，来触发浏览器的垃圾回收，以便及时释放其引用。

					
					
						/* Not good */
						var a;
						
						if (a === null) {
						    ...
						}
						
						/* Good */
						var a = null;
						
						if (a === null) {
						    ...
						}
						
						var userInfos = data.userInfo;
						
						buildUserList(userInfos);
						userInfos = null;  // 及时清除 userInfos 的引用，释放内存资源
						doOtherThings();

undefined

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

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

					
					
						/* Not good */
						if (person === undefined) {
						    ...
						}
						
						/* Good */
						if (typeof person === 'undefined') {
						    ...
						}

杂项

用 ===, !== 代替 ==, !=；
不要在内置对象的原型上添加方法，如 Array, Date；
不要声明了变量却不使用；
不要在同个作用域下声明同名变量；
不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；
不要在循环内部声明函数；
避免使用 eval；
不要使用 with；
for-in 里一定要有 hasOwnProperty 的判断；
为 setTimeout() 和 setInterval() 传入函数而不是字符串。

					
					
						/* Not good */
						if (a == 1) {
						    a++;
						}
						
						/* Good */
						if (a === 1) {
						    a++;
						}
						
						/* Not good */
						Array.prototype.count = function(value) {
						    return 4;
						}
						
						/* Not good */
						var x = 1;
						
						function test() {
						    if (x === 10) {
						        var x = 0;
						    }
						    x += 1;
						}
						
						/* Good */
						for (key in obj) {
						    if (obj.hasOwnProperty(key)) {
						        // 确保 obj[key] 属于对象而不是继承
						        console.log(obj[key]);
						    }
						}
						
						/* Not good */
						setInterval('getStatus()', 1000);
						
						setTimeout('if(!true){ doSomething() }', 500);
						
						/* Good */
						setInterval(getStatus, 1000);
						
						setTimeout(
						    if (!true) {
						        doSomething();
						    }
						}, 500);

编辑器插件和配置文件

前端开发首推的编辑器是 VSCode，微软出品，免费且功能强大，颜值极高，拥有较为丰富的插件资源，是一个“披着编辑器外衣的 IDE”。

其次是 Atom，GitHub 御用编辑器，也是一款非常不错的免费编辑器，但对机器性能有一定要求，启动较慢。

最后是 Sublime Text，小巧轻便，速度快，是一款收费编辑器（可无限试用）。

编辑器插件：
- 统一团队代码风格的利器： EditorConfig
- JavaScript 代码实时校验(VSCode)： ESLint
- 快速注释(VSCode)： Add jsdoc comments

插件配置文件：

.editorconfig （因 Windows 下无法下载只有拓展名的文件，故此处将 .editorconfig 文件打成了一个压缩包，使用时需解压出来，下同）

配置文件的内容说明如下：

									properties:
									
										# 表明是最顶层的配置文件
										root = true
										
										[*]
										# 文件统一采用 UTF-8 无 BOM 编码
										charset = utf-8
										
										# 缩进方式统一使用 tab 键
										indent_style = tab
										
										# 缩进字符数为 4
										indent_size = 4
										
										# 换行符统一使用 Unix-style 0x0A（LF）
										end_of_line = lf
										
										# 文件以一个空白行结尾
										insert_final_newline = true
										
										# 自动删除行尾空格
										trim_trailing_whitespace = true
										
										[*.md]
										# markdown 文件不删除行尾空格，以免导致排版错乱
										trim_trailing_whitespace = false

（插件和配置文件玩命整理中...）

TOP

Web 前端代码规范 v1.0 Beta

目录

文件/资源命名

HTML

CSS, SCSS

JavaScript

最佳原则

文件/资源命名

通用规则

目录命名

HTML文件命名

CSS, SCSS 文件命名

JavaScript 文件命名

图片命名

HTML

通用规则

缩进

文档头

字符编码

渲染模式

CSS 和 JavaScript 文件引入

属性顺序

Boolean 属性

CSS, SCSS

通用规则

缩进

空格

换行与空行

引号

注释

命名

声明顺序

简写和省略

前缀属性

杂项

JavaScript

通用规则

缩进

空格

换行与空行

分号

引号

括号

代码注释

变量命名

函数

对象

null

undefined

杂项

编辑器插件和配置文件