命名规则
-
1 全部采用小写的方式，以下划线分隔
eg：my_project_name -
2 有复数结构时，要采用复数命名法
eg：scripts 、styles 、 images 、 data_models
HTML
-
1 缩进使用soft tab (4个空格)
-
2 在属性上，使用双引号，不要使用单引号
-
3 不要忽略自动闭合标签结尾处使用斜线和可选的关闭标签
eg：<img /> , <li></li> -
4 lang 属性 规定加上，常用的有如下
<html lang="en-us"></html>
<html lang="zh-cn"></html>
<html lang="zh-hk"></html>
<html lang="zh-tw"></html> -
5 字符编码 指定为"UTF-8"
-
6 IE兼容模式： 用
<meta>标签指定页面应该用什么版本的IE来渲染，可通过连接链接了解更多
eg：<meta http-equiv="X-UA-Compatible content="IE=Edge"/>
-
7 引入css,js：不需要指明type
<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>-
8 属性顺序：属性应该按照特定的顺序出现以保证易读性
* class * id * name * src , value , data-* , href * for , type , max-length , max , min , pattern * placeholder, title, alt * aria-*, role * required , readonly , disabled -
9 boolean属性：不需要声明取值的属性
eg：<input type="text" disabled />
<input type="checkbox" value="1" checked />
<select>
<option value="1" selected >1</option>
</select>
-
- 10 减少标签数量：需要尽量避免多余的父节点
CSS
-
1 分号 空格
以下几种情况不需要空格：属性名后 多个规则的分隔符','前 !important'!'后 属性值中'('后和')'前 行末不要有多余的空格 以下几种情况需要空格： 属性值前 选择器'>', '+', '~'前后 '{'前 !important '!'前 @else前后 属性值中的','后 注释'/*'后和'*/'前 eg： .element, .dialog, .element > .dialog{ color: red !important; background-color: rgba(0, 0, 0, .5); } -
2 空行 换行
以下几种情况需要空行： 文件最后保留一个空行 '}'后最好跟一个空行，包括scss中嵌套的规则 属性之间需要适当的空行 以下几种情况不需要换行： '{'前 以下几种情况需要换行： '{'后和'}'前 每个属性独占一行 多个规则的分隔符','后 eg： .element, .dialog, .element > .dialog{ color: red !important; background-color: rgba(0, 0, 0, .5); } .dialog { color: red; &:after { ... } } -
3 属性声明顺序
// 下面是推荐的属性的顺序
[
[
"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",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-effect",
"font-emphasize",
"font-emphasize-position",
"font-emphasize-style",
"font-smooth",
"line-height",
"text-align",
"-webkit-text-align-last",
"-moz-text-align-last",
"-ms-text-align-last",
"text-align-last",
"vertical-align",
"white-space",
"text-decoration",
"text-emphasis",
"text-emphasis-color",
"text-emphasis-style",
"text-emphasis-position",
"text-indent",
"-ms-text-justify",
"text-justify",
"letter-spacing",
"word-spacing",
"-ms-writing-mode",
"text-outline",
"text-transform",
"text-wrap",
"-ms-text-overflow",
"text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"-ms-word-wrap",
"word-wrap",
"-ms-word-break",
"word-break"
],
[
"color",
"background",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"background-color",
"background-image",
"background-repeat",
"background-attachment",
"background-position",
"-ms-background-position-x",
"background-position-x",
"-ms-background-position-y",
"background-position-y",
"-webkit-background-clip",
"-moz-background-clip",
"background-clip",
"background-origin",
"-webkit-background-size",
"-moz-background-size",
"-o-background-size",
"background-size"
],
[
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"opacity",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
"-ms-interpolation-mode",
"-webkit-box-shadow",
"-moz-box-shadow",
"box-shadow",
"filter:progid:DXImageTransform.Microsoft.gradient",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
"text-shadow"
],
[
"-webkit-transition",
"-moz-transition",
"-ms-transition",
"-o-transition",
"transition",
"-webkit-transition-delay",
"-moz-transition-delay",
"-ms-transition-delay",
"-o-transition-delay",
"transition-delay",
"-webkit-transition-timing-function",
"-moz-transition-timing-function",
"-ms-transition-timing-function",
"-o-transition-timing-function",
"transition-timing-function",
"-webkit-transition-duration",
"-moz-transition-duration",
"-ms-transition-duration",
"-o-transition-duration",
"transition-duration",
"-webkit-transition-property",
"-moz-transition-property",
"-ms-transition-property",
"-o-transition-property",
"transition-property",
"-webkit-transform",
"-moz-transform",
"-ms-transform",
"-o-transform",
"transform",
"-webkit-transform-origin",
"-moz-transform-origin",
"-ms-transform-origin",
"-o-transform-origin",
"transform-origin",
"-webkit-animation",
"-moz-animation",
"-ms-animation",
"-o-animation",
"animation",
"-webkit-animation-name",
"-moz-animation-name",
"-ms-animation-name",
"-o-animation-name",
"animation-name",
"-webkit-animation-duration",
"-moz-animation-duration",
"-ms-animation-duration",
"-o-animation-duration",
"animation-duration",
"-webkit-animation-play-state",
"-moz-animation-play-state",
"-ms-animation-play-state",
"-o-animation-play-state",
"animation-play-state",
"-webkit-animation-timing-function",
"-moz-animation-timing-function",
"-ms-animation-timing-function",
"-o-animation-timing-function",
"animation-timing-function",
"-webkit-animation-delay",
"-moz-animation-delay",
"-ms-animation-delay",
"-o-animation-delay",
"animation-delay",
"-webkit-animation-iteration-count",
"-moz-animation-iteration-count",
"-ms-animation-iteration-count",
"-o-animation-iteration-count",
"animation-iteration-count",
"-webkit-animation-direction",
"-moz-animation-direction",
"-ms-animation-direction",
"-o-animation-direction",
"animation-direction"
],
[
"content",
"quotes",
"counter-reset",
"counter-increment",
"resize",
"cursor",
"-webkit-user-select",
"-moz-user-select",
"-ms-user-select",
"user-select",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"-moz-tab-size",
"-o-tab-size",
"tab-size",
"-webkit-hyphens",
"-moz-hyphens",
"hyphens",
"pointer-events"
]
]
-
4 媒体查询：尽量将媒体查询的规则靠近与他们相关的规则，不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部，这样做只会让大家以后更容易忘记他们。
-
5 不要在一个文件里出现两个相同的规则
eg：用 border: 0; 代替 border: none;
JS
- 1 分号
以下几种情况后需加分号：
变量声明
表达式
return
throw
break
continue
do-while
- 2 引号：最外层统一使用单引号。
var y = 'foo',
z = '<div id="test"></div>';
- 3 变量命名
标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
'ID'在变量名中全大写
'URL'在变量名中全大写
'Android'在变量名中大写第一个字母
'iOS'在变量名中小写第一个，大写后两个字母
常量全大写，用下划线连接
构造函数，大写第一个字母
jquery对象必须以'$'开头命名
- 4 括号
下列关键字后必须有大括号（即使代码块的内容只有一行）：
if,
else,
for,
while,
do,
switch,
try,
catch,
finally,
with,
- 5 null
适用场景：
初始化一个将来可能被赋值为对象的变量
与已经初始化的变量做比较
作为一个参数为对象的函数的调用传参
作为一个返回对象的函数的返回值
不适用场景：
不要用null来判断函数调用时有无传参
不要与未初始化的变量做比较
- 6 undefined
//永远不要直接使用undefined进行变量判断；
//使用typeof和字符串'undefined'对变量进行判断。
if (typeof person === 'undefined') { ...}
- 7 jshint
1、用'===', '!=='代替'==', '!='；
2、for-in里一定要有hasOwnProperty的判断；
3、不要在内置对象的原型上添加方法，如Array, Date；
4、不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；
5、变量不要先使用后声明；
6、不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；
7、不要在同个作用域下声明同名变量；
8、不要在一些不需要的地方加括号，例：delete(a.b)；
9、不要使用未声明的变量（全局变量需要加到.jshintrc文件的globals属性里面）；
10、不要声明了变量却不使用；
11、不要在应该做比较的地方做赋值；
12、debugger不要出现在提交的代码里；
13、数组中不要存在空元素；
14、不要在循环内部声明函数；
15、不要像这样使用构造函数，例：new function () { ... }, new Object；
if (a === 1) {
a++;
}
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]);
}
}
var person = new Person();
网友评论