书写规则

来源：互联网发布：电工电子技术网络课编辑：程序博客网时间：2024/04/30 08:21

一.命名规则

全部采用小写方式， 以下划线分隔。例：my_project_name

二.HTML

1.语法

缩进使用soft tab（4个空格）；嵌套的节点应该缩进；在属性上，使用双引号，不要使用单引号；属性名全小写，用中划线做分隔符；不要在自动闭合标签结尾处使用斜线（HTML5 规范 指出他们是可选的）；不要忽略可选的关闭标签，例：</li> 和 </body>。例如：<!DOCTYPE html><html><head>    <title>Page title</title></head><body>    <img src="images/company_logo.png" alt="Company">    <h1 class="hello-world">Hello, world!</h1></body></html>

2.HTML5 doctype

在页面开头使用这个简单地doctype来启用标准模式，使其在每个浏览器中尽可能一致的展现；虽然doctype不区分大小写，但是按照惯例，doctype大写 。

3.lang属性

根据HTML5规范：应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。例如：<!DOCTYPE html> <html lang="en-us"> ...</html>

4.字符编码

 通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。   <meta charset="UTF-8">

5.IE兼容模式

 用 <meta> 标签可以指定页面应该用什么版本的IE来渲染； 例如： <!DOCTYPE html><html><head>    <meta http-equiv="X-UA-Compatible" content="IE=Edge"></head>...</html>

6.引入CSS, JS

根据HTML5规范, 通常在引入CSS和JS时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。例如： <!-- External CSS --> <link rel="stylesheet" href="code_guide.css"> <!-- In-document CSS --><style>...</style><!-- External JS --><script src="code_guide.js"></script><!-- In-document JS --><script>...</script>  HTML5 规范链接   使用link   使用style   使用script

7.属性顺序

属性应该按照特定的顺序出现以保证易读性；classidnamedata-*src, for, type, href, value , max-length, max, min, patternplaceholder, title, altaria-*, rolerequired, readonly, disabled

8.boolean属性

boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；boolean属性的存在表示取值为true，不存在则表示取值为false。

9.JS生成标签

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

10.减少标签数量

在编写HTML代码时，需要尽量避免多余的父节点；很多时候，需要通过迭代和重构来使HTML变得更少。

11.实用高于完美

 尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价； 任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。

三.CSS, SCSS

1.缩进

使用soft tab（4个空格）。例如: .element {    position: absolute;    top: 10px;    left: 10px;    border-radius: 10px;    width: 50px;    height: 50px;}

2.分号

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

3.空格

以下几种情况不需要空格：属性名后多个规则的分隔符','前!important '!'后属性值中'('后和')'前行末不要有多余的空格以下几种情况需要空格：属性值前选择器'>', '+', '~'前后'{'前!important '!'前@else 前后属性值中的','后注释'/*'后和'*/'前

4.空行

以下几种情况需要空行：文件最后保留一个空行'}'后最好跟一个空行，包括scss中嵌套的规则属性之间需要适当的空行，具体见属性声明顺序例如：/* not good */.element {...}.dialog {color: red;&:after {    ...}}/* good */.element {...}.dialog {color: red;&:after {    ...}}

5.换行

以下几种情况不需要换行：'{'前以下几种情况需要换行：'{'后和'}'前每个属性独占一行多个规则的分隔符','后

6.注释

注释统一用'/* */'（scss中也不要用'//'），具体参照右边的写法；缩进与下一行代码保持一致；可位于一个代码行的末尾，与代码间隔一个空格。

7.引号

最外层统一使用双引号；url的内容要用引号；属性选择器中的属性值需要引号。

8.命名

类名使用小写字母，以中划线分隔id采用驼峰式命名scss中的变量、函数、混合、placeholder采用驼峰式命名 例如：/* class */.element-content {...}/* id */ #myDialog {...}/* 变量 */$colorBlack: #000;/* 函数 */@function pxToRem($px) {...}/* 混合 */@mixin centerBlock {...}/* placeholder */%myDialog {...}

9.属性声明顺序

相关的属性声明按右边的顺序做分组处理，组之间需要有一个空行。例如：.declaration-order {display: block;float: right;position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 100;border: 1px solid #e5e5e5;border-radius: 3px;width: 100px;height: 100px;font: normal 13px "Helvetica Neue", sans-serif;line-height: 1.5;text-align: center;color: #333;background-color: #f5f5f5;opacity: 1;}

10.颜色

颜色16进制用小写字母；颜色16进制尽量用简写。

11.属性简写

属性简写需要你非常清楚属性值的正确顺序，而且在大多数情况下并不需要设置属性简写中包含的所有值，所以建议尽量分开声明会更加清晰；margin 和 padding 相反，需要使用简写；常见的属性简写包括： font background transition animation 例如： /* not good */.element {transition: opacity 1s linear 2s; } /* good */.element {transition-delay: 2s;transition-timing-function: linear;transition-duration: 1s;transition-property: opacity;

}
12.媒体查询

尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。例如：.element {...}.element-avatar{... }@media (min-width: 480px) {.element {    ...}.element-avatar {    ...}}补充： css2的@media css2里面虽然支持@media属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的CSS。 语法： @media sMedia { sRules } 说明： sMedia : 指定设备名称。请参阅附录：设备类型 sRules : 样式表定义 指定样式表规则用于指定的设备类型。请参阅link对象的media属性（特性）。 示例：  // 设置显示器用字体尺寸@media screen {BODY { font-size : 12pt ; }} // 设置打印机用字体尺寸@media print {@import "print.css"BODY { font-size : 8pt ;}} css3的@media@media 属性在CSS3里面已经演变成一种 media queries（媒体查询/匹配）了,在CSS3里面，可以用查询语句来匹配各种类型的屏幕。语法：@media ： { sRules }取值：  <sMedia>：指定设备名称。 {sRules}：样式表定义。 说明：判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型，同一媒介的不同条件（分辨率、色数等等）. media_query: [only | not]? [ and ]* expression: ( [: ]? )media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossedmedia_feature: width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid 解析:媒体查询条件。包括了 only not and 这些经常在程序里面出现的逻辑判断。expression :表达式。媒体特征的匹配与否。media_type :媒体的种类。包括了很多。media_feature :媒体的特征。常用的是 min-width max-width 最小最大宽度的判断

13.SCSS相关

SCSS相关提交的代码中不要有 @debug；声明顺序：@extend不包含 @content 的 @include包含 @content 的 @include自身属性嵌套规则@import 引入的文件不需要开头的'_'和结尾的'.scss'；嵌套最多不能超过5层；@extend 中使用placeholder选择器；去掉不必要的父级引用符号'&'。例如：/* not good */@import "_dialog.scss";/* good */@import "dialog";/* not good */.fatal {@extend .error;}/* good */.fatal {@extend %error;}/* not good */.element {& > .dialog {    ...}}/* good */.element {> .dialog {    ...}}

14.杂项
（1）不允许有空的规则；
/* not good */
.element {
}
（2）元素选择器用小写字母；
/* not good */
LI {
…
}
/* good */
li {
…
}
（3）去掉小数点前面的0；
/* not good */
.element {
color: rgba(0, 0, 0, 0.5);
}

 /* good */.element {color: rgba(0, 0, 0, .5);}（4）去掉数字中不必要的小数点和末尾的0；  /* not good */.element {width: 50.0px;}/* good */.element {width: 50px;}（5）属性值'0'后面不要加单位；    /* not good */.element {width: 0px; }/* good */.element {width: 0;}（6）同个属性不同前缀的写法需要在垂直方向保持对齐，具体参照右边的写法；    /* not good */ .element {    border-radius: 3px;    -webkit-border-radius: 3px;    -moz-border-radius: 3px;    background: linear-gradient(to bottom, #fff 0, #eee 100%);    background: -webkit-linear-gradient(top, #fff 0, #eee 100%);    background: -moz-linear-gradient(top, #fff 0, #eee 100%); }/* good */.element {    -webkit-border-radius: 3px;       -moz-border-radius: 3px;            border-radius: 3px;background: -webkit-linear-gradient(top, #fff 0, #eee 100%);background:    -moz-linear-gradient(top, #fff 0, #eee 100%);background:         linear-gradient(to bottom, #fff 0, #eee 100%);}（7）无前缀的标准属性应该写在有前缀的属性后面；  /* not good */ .element {color: rgb(0, 0, 0);width: 50px;color: rgba(0, 0, 0, .5); } /* good */.element {color: rgb(0, 0, 0);color: rgba(0, 0, 0, .5);}（8）不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系；（9）不要在一个文件里出现两个相同的规则；（10）用 border: 0; 代替 border: none;；（11)选择器不要超过4层（在scss中如果超过4层应该考虑用嵌套的方式来写）； (12)发布的代码中不要有 @import； (13)尽量少用'*'选择器。

四.JavaScript

1.缩进

使用soft tab（4个空格）。

2.单行长度

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

3.分号

 以下几种情况后需加分号：变量声明表达式returnthrowbreakcontinuedo-while

4.空格

以下几种情况不需要空格：对象的属性名后前缀一元运算符后后缀一元运算符前函数调用括号前无论是函数声明还是函数表达式，'('前不要空格数组的'['后和']'前对象的'{'后和'}'前运算符'('后和')'前以下几种情况需要空格：二元运算符前后三元运算符'?:'前后代码块'{'前下列关键字前：else, while, catch, finally下列关键字后：if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof单行注释'//'后（若单行注释和代码同行，则'//'前也需要），多行注释'*'后对象的属性值前for循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格无论是函数声明还是函数表达式，'{'前一定要有空格函数的参数之间

5.空行

以下几种情况需要空行：（1）变量声明后（当变量声明在代码块的最后一行时，则无需空行） 例如： var x=1; if (x >=1){    var y=x+1;}var a=2;（2）注释前（当注释在代码块的第一行时，则无需空行）（3）代码块后（在函数调用、数组、对象中则无需空行）（4）文件最后保留一个空行

6.换行

换行的地方，行末必须有','或者运算符；换行的地方，行末必须有','或者运算符；以下几种情况不需要换行：下列关键字后：else, catch, finally代码块'{'前以下几种情况需要换行：代码块'{'后和'}'前变量赋值后

7.单行注释

(1)双斜线后，必须跟一个空格；缩进与下一行代码保持一致；可位于一个代码行的末尾，与代码间隔一个空格。// if you made it here, then all security checksif (condition) {    // if you made it here, then all security checks passed    allowed();}var zhangsan = 'zhangsan'; // one space after code

8.多行注释

最少三行, '*'后跟一个空格，具体参照右边的写法；建议在以下情况下使用：难于理解的代码段可能存在错误的代码段浏览器特殊的HACK代码业务逻辑强相关的代码注意： Hack是基于开源的程序的基础，对其代码进行增加、删除或者修改、优化，使之在功能上符合新的需求。Hack大多和插件混为一谈，其实二者是有很大区别的：插件一般是利用程序的API（接口），复用程序底层，利用一些程序既有的函数和类制作新的小作品，一般有文件的增加，且符合标准的插件，其目录结构和文件名都是有一定格式的（如Discuz!的插件文件需放在plugin目录下）。而Hack则是针对原程序文件的直接修改，在格式上也自然没有太严格的规定，且一般没有文件的增加。

9.文档注释

建议在以下情况下使用：所有常量所有函数所有类

10.引号
最外层统一使用单引号。
例如：
// not good
var x = “test”;

// goodvar y = 'foo',z = '<div id="test"></div>';

11.变量命名

标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）'ID'在变量名中全大写'URL'在变量名中全大写'Android'在变量名中大写第一个字母'iOS'在变量名中小写第一个，大写后两个字母常量全大写，用下划线连接构造函数，大写第一个字母jquery对象必须以'$'开头命名例如：var thisIsMyName;var goodID;var reportURL;var AndroidVersion;var iOSVersion;var MAX_COUNT = 10;function Person(name) {this.name = name;}// not goodvar body = $('body');// goodvar $body = $('body');

12.变量声明

一个函数作用域中所有的变量声明尽量提到函数首部，用一个var声明，不允许出现两个连续的var声明。function doSomethingWithItems(items) {// use one varvar value = 10,    result = value + 10,    i,    len;for (i = 0, len = items.length; i < len; i++) {    result += 10;}}

13.函数

（1）无论是函数声明还是函数表达式，'('前不要空格，但'{'前一定要有空格；例如;var doSomething= function(item) {    // do something};function doSomething(item) {    // do something}(2)函数调用括号前不需要空格；// not gooddoSomething (item);// gooddoSomething(item);(3)立即执行函数外必须包一层括号；(function() {    return 1;})();(4)不要给inline function命名；// not good[1, 2].forEach(function x() {...});// good[1, 2].forEach(function() {...});(5)参数之间用', '分隔，注意逗号后有一个空格。var doSomething = function(a, b, c) {     // do something};

14.数组、对象

对象属性名不需要加引号；对象以缩进的形式书写，不要写在一行；数组、对象最后不要有逗号。// not goodvar a = {    'b': 1};var a = {b: 1};var a = {    b: 1,    c: 2,};// goodvar a = {    b: 1,    c: 2};

15.括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。例如：// not goodif (condition)doSomething();// goodif (condition) {doSomething();}

16.null

（1）适用场景：    初始化一个将来可能被赋值为对象的变量    与已经初始化的变量做比较    作为一个参数为对象的函数的调用传参    作为一个返回对象的函数的返回值（2)不适用场景：    不要用null来判断函数调用时有无传参    不要与未初始化的变量做比较

17.undefined

永远不要直接使用undefined进行变量判断；使用typeof和字符串'undefined'对变量进行判断。例如：// not goodif (person === undefined) {    ...}// goodif (typeof person === 'undefined') {     ...}

18.jshint

（1)用'===', '!=='代替'==', '!='；    // good    if (a === 1) {        a++;    } (2）for-in里一定要有hasOwnProperty的判断；    for (key in obj) {        if (obj.hasOwnProperty(key)) {            // be sure that obj[key] belongs to the object and was not inherited            console.log(obj[key]);    }(3)不要在内置对象的原型上添加方法，如Array, Date；    不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；变量不要先使用后声明；不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；不要在同个作用域下声明同名变量；不要在一些不需要的地方加括号，例：delete(a.b)；不要使用未声明的变量（全局变量需要加到.jshintrc文件的globals属性里面）；不要声明了变量却不使用；不要在应该做比较的地方做赋值；debugger不要出现在提交的代码里；数组中不要存在空元素；不要在循环内部声明函数；不要像这样使用构造函数，例：new function () { ... }, new Object；

19.杂项

（1）不要混用tab和space； (2)不要在一处使用多个tab或space； (3)换行符统一用'LF'；（4)对上下文this的引用只能使用'_this', 'that', 'self'其中一个来命名；例如：function Person() {    // not good    var me = this;    // good    var _this = this;    // good    var that = this;    // good    var self = this;}（5）行尾不要有空白字符；    switch的falling through和no default的情况一定要有注释特别说明；(6)switch的falling through和no default的情况一定要有注释特别说明；(7)不允许有空的代码块。例如：// not good with empty blockif (condition) {}

编辑器配置和构建检查

0 0