html、css、js的命名规范
最佳原则
坚持制定好的代码规范。
无论团队人数多少，代码应该同出一门。
项目命名
全部采用小写方式， 以下划线分隔。
例：my_project_name
目录命名
参照项目命名规则；
有复数结构时，要采用复数命名法。
例：scripts, styles, images, data_models
JS文件命名
参照项目命名规则。
例：account_model.js
HTML文件命名
参照项目命名规则。
例：error_report.html
语法
- 缩进使用soft tab（4个空格）；
- 嵌套的节点应该缩进；
- 在属性上，使用双引号，不要使用单引号；
- 属性名全小写，用中划线做分隔符；
- 不要在自动闭合标签结尾处使用斜线（HTML5 规范指出他们是可选的）；
- 不要忽略可选的关闭标签，例：
</li>和</body>。 -
HTML5 doctype
在页面开头使用这个简单地doctype来启用标准模式，使其在每个浏览器中尽可能一致的展现；
虽然doctype不区分大小写，但是按照惯例，doctype大写
<!DOCTYPE html> -
lang属性
根据HTML5规范：
应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。
更多关于
lang属性的说明在这里；在sitepoint上可以查到语言列表；
但sitepoint只是给出了语言的大类，例如中文只给出了zh，但是没有区分香港，台湾，大陆。而微软给出了一份更加详细的语言列表，其中细分了zh-cn, zh-hk, zh-tw。
-
<!DOCTYPE html> <html lang="en-us"> ... </html> -
字符编码
通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。
-
IE兼容模式
用
<meta>标签可以指定页面应该用什么版本的IE来渲染；不同doctype在不同浏览器下会触发不同的渲染模式（这篇文章总结的很到位）。 -
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> </head> ... </html> -
引入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> -
属性顺序
属性应该按照特定的顺序出现以保证易读性；
classidnamedata-*src,for,type,href,value,max-length,max,min,patternplaceholder,title,altaria-*,rolerequired,readonly,disabled
class是为高可复用组件设计的，所以应处在第一位；
id更加具体且应该尽量少使用，所以将它放在第二位。
-
<a class="..." id="..." data-modal="toggle" href="#">Example link</a> <input class="form-control" type="text"> <img src="..." alt="..."> -
boolean属性
boolean属性指不需要声明取值的属性，XHTML需要每个属性声明取值，但是HTML5并不需要；
- boolean属性的存在表示取值为true，不存在则表示取值为false。
-
<input type="text" disabled> <input type="checkbox" value="1" checked> <select> <option value="1" selected>1</option> </select> -
JS生成标签
在JS文件中生成标签让内容变得更难查找，更难编辑，性能更差。应该尽量避免这种情况的出现。
-
减少标签数量
在编写HTML代码时，需要尽量避免多余的父节点；
很多时候，需要通过迭代和重构来使HTML变得更少。
-
<!-- Not well --> <span class="avatar"> <img src="..."> </span> <!-- Better --> <img class="avatar" src="..."> -
实用高于完美
尽量遵循HTML标准和语义，但是不应该以浪费实用性作为代价；
任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。
-
CSS, SCSS
-
缩进
使用soft tab（4个空格）。
-
.element { position: absolute; top: 10px; left: 10px; border-radius: 10px; width: 50px; height: 50px; } -
分号
每个属性声明末尾都要加分号。
-
.element { width: 20px; height: 20px; background-color: red; } -
空格
以下几种情况不需要空格：
- 属性名后
- 多个规则的分隔符','前
!important'!'后- 属性值中'('后和')'前
- 行末不要有多余的空格
以下几种情况需要空格：
- 属性值前
- 选择器'>', '+', '~'前后
- '{'前
!important'!'前@else前后- 属性值中的','后
注释'/*'后和'*/'前
/* not good */
.element {
color :red! important;
background-color: rgba(0,0,0,.5);
}
/* good */
.element {
color: red !important;
background-color: rgba(0, 0, 0, .5);
}
/* not good */
.element ,
.dialog{
...
}
/* good */
.element,
.dialog {
}
/* not good */
.element>.dialog{
...
}
/* good */
.element > .dialog{
...
}
/* not good */
.element{
...
}
/* good */
.element {
...
}
/* not good */
@if{
...
}@else{
...
}
/* good */
@if {
...
} @else {
...
}空行
以下几种情况需要空行：
- 文件最后保留一个空行
- '}'后最好跟一个空行，包括scss中嵌套的规则
- 属性之间需要适当的空行，具体见属性声明顺序
-
/* not good */ .element { ... } .dialog { color: red; &:after { ... } } /* good */ .element { ... } .dialog { color: red; &:after { ... } }
换行
以下几种情况不需要换行：
- '{'前
以下几种情况需要换行：
-
- '{'后和'}'前
- 每个属性独占一行
- 多个规则的分隔符','后
-
/* not good */ .element {color: red; background-color: black;} /* good */ .element { color: red; background-color: black; } /* not good */ .element, .dialog { ... } /* good */ .element, .dialog { ... }
注释
注释统一用'/* */'（scss中也不要用'//'），具体参照右边的写法；
缩进与下一行代码保持一致；
可位于一个代码行的末尾，与代码间隔一个空格。
-
-
-
-
/* Modal header */ .modal-header { ... } /* * Modal header */ .modal-header { ... } .modal-header { /* 50px */ width: 50px; color: red; /* color red */ }
-
-
-
-
引号
最外层统一使用双引号；
url的内容要用引号；
属性选择器中的属性值需要引号。
-
-
-
.element:after { content: ""; background-image: url("logo.png"); } li[data-type="single"] { ... }
-
-
-
命名
-
- 类名使用小写字母，以中划线分隔
- id采用驼峰式命名
- scss中的变量、函数、混合、placeholder采用驼峰式命名
-
/* class */ .element-content { ... } /* id */ #myDialog { ... } /* 变量 */ $colorBlack: #000; /* 函数 */ @function pxToRem($px) { ... } /* 混合 */ @mixin centerBlock { ... } /* placeholder */ %myDialog { ... }
-
属性声明顺序
相关的属性声明按下边的顺序做分组处理，组之间需要有一个空行。
-
-
-
-
-
// 下面是推荐的属性的顺序 [ [ "display", "visibility", "float", "clear", "overflow", "overflow-x", "overflow-y", "clip", "zoom" ], [ "table-layout", "empty-cells", "caption-side", "border-spacing", "border-collapse", "list-style", "list-style-position", "list-style-type", "list-style-image" ], [ "-webkit-box-orient", "-webkit-box-direction", "-webkit-box-decoration-break", "-webkit-box-pack", "-webkit-box-align", "-webkit-box-flex" ], [ "position", "top", "right", "bottom", "left", "z-index" ], [ "margin", "margin-top", "margin-right", "margin-bottom", "margin-left", "-webkit-box-sizing", "-moz-box-sizing", "box-sizing", "border", "border-width", "border-style", "border-color", "border-top", "border-top-width", "border-top-style", "border-top-color", "border-right", "border-right-width", "border-right-style", "border-right-color", "border-bottom", "border-bottom-width", "border-bottom-style", "border-bottom-color", "border-left", "border-left-width", "border-left-style", "border-left-color", "-webkit-border-radius", "-moz-border-radius", "border-radius", "-webkit-border-top-left-radius", "-moz-border-radius-topleft", "border-top-left-radius", "-webkit-border-top-right-radius", "-moz-border-radius-topright", "border-top-right-radius", "-webkit-border-bottom-right-radius", "-moz-border-radius-bottomright", "border-bottom-right-radius", "-webkit-border-bottom-left-radius", "-moz-border-radius-bottomleft", "border-bottom-left-radius", "-webkit-border-image", "-moz-border-image", "-o-border-image", "border-image", "-webkit-border-image-source", "-moz-border-image-source", "-o-border-image-source", "border-image-source", "-webkit-border-image-slice", "-moz-border-image-slice", "-o-border-image-slice", "border-image-slice", "-webkit-border-image-width", "-moz-border-image-width", "-o-border-image-width", "border-image-width", "-webkit-border-image-outset", "-moz-border-image-outset", "-o-border-image-outset", "border-image-outset", "-webkit-border-image-repeat", "-moz-border-image-repeat", "-o-border-image-repeat", "border-image-repeat", "padding", "padding-top", "padding-right", "padding-bottom", "padding-left", "width", "min-width", "max-width", "height", "min-height", "max-height" ], [ "font", "font-family", "font-size", "font-weight", "font-style"
-
-
-
-