前段规范(更新中)

网上看到的一些前端规范，结合自己的，整理了下，留着看看

javascript规范

1. 规则一，表示块开始的大括弧，不要另起一行(js 中，其他编程语言不熟)

对于编码是大括弧｛｝的位置，有人喜欢

block
{
      ... 
}

也有人习惯

block{
      ...
}

一般来说，两者都可以。但你如果你了解js会自动添加句末的分号，因此会产生的一些bug，例如：

return
{
      key: value;
}

上面的代码原意是返回一个对象，但实际上是undefined；因为js在return后面添加了分号；变成了return; 后面的也就没了。

2. 规则二，调用函数的时候，函数名和左括号之间没有空格。

eg: fn(test)

                  函数名与参数序列之间没有空格。

eg: function fn(b) {...};

                  所有其他语法元素与左括号之间，都有一个空格。

eg: function fn(b) {...}; 

   圆括号在js中有两种作用，一种表示函数，另一种表示不同的值的组合。不同的空格位置，可以区分两者。

3. 规则三，不要省略句末的分号！

a=b
(function() {
    ...
})();

上面的代码省略了a=b后面的分号，语句的混乱。

4. 规则四，with语句的少用

在另一篇讲作用域链的文章里有提过到，一个可以按序列检索的对象列表，通过with可以惊醒变量名解析。

with语句用语临时扩展作用域链，语法：

width(object)
statement

 这条来自犀牛书上的语句讲object添加到作用域链的头部，然后执行statement，最后把作用域链恢复到原始状态。

但是，在“use strict”  下严格禁止的，在非严格模式下也应该尽量少用，因为with语句不但难优化，而且运行较没有with语句缓慢。

5. 规则五，不要使用相等(==)运算符，只是用全等(===)运算符。

相等运算符会允许进行类型转换，假使两个操作数类型不用，“==”运算符可可能认为它们相等，如:

1234 == "abcd"    //true
null   == undefined     //true
true   ==    1    //true
true   ==    12   //false
false   ==    0    //true
0       ==   " "   //true
"\t\n"  ==  0   //true

可参考犀牛书75页

6. 规则六，不要讲不同目的的语句，合并为一句。

7. 规则七，讲变量声明都放在函数头部；所有函数在使用前定义。

    涉及局部和全局函数作用域。

8. 规则八，避免使用全局变量，尽量用大写字母。

9. 规则九，构造函数首字母大写，其他函数驼峰式。

10. 规则十，尽量用“+=1”,"-=1" 替代自增和自减运算符。

html规范

1. 规则一，结构(HTML)，表现(CSS)，行为(js)分离。

html文件中尽量都使用外链样式表，js也是，且js文件引用都放到</body>后</html>前，有利于页面加载。

2. 规范二，所有html标签必须小写，所有html属性小写，所有样式名小写。

3. 规范三，统一使用<!DOCTYPE html>，兼容h5文档前后类型。

4. 规范四，省略css，js文件的type属性，HTML5 默认按照 text/css 及 text/javascript解析，兼容较老的浏览器。

5. 规范五，input中非必要属性可省略。

6. 规范六，属性都用双引号包裹。

或者你喜欢用单引号，那就全用单引号，不要一会儿单引号，一会儿双引号，js引用html的情况除外。

7. 规范七，标签嵌套规范

可参考：HTML4/XHTML1.0Strict, HTML5

8.  规范八，标签闭合，主要指link，img，etc...

虽然有些标记没有要求必须关闭，但是为了避免出错的几率，要求必须全部关闭，省去判断某标记是否需要关闭的时间

9.   规范九，为img加上alt属性，主要针对搜索引擎；

在audio标签之间加上文字替代，这样老的浏览器就可以显示出不支持该标签的信息；

在video标签之间加上文字替代，这样老的浏览器就可以显示出不支持该标签的信息；

10. 规范十，label加上for，针对input或者textarea的id。

11. 规范十一，在每个代码块开始和结束的地方添加注释。

12. 规范十二，在移动端和不需要兼容低版本的pc页面中使用语意化的标签，seo。

13.   规范十三，模块的命名(class)：

类似模块，取相同样式命名；子辈节点类名需带上模块名；孙辈节点无需带模块名...

CSS规范

1. 规范一，用link标签外链样式表。

不允许在页面使用<style></style>块；

不允许用style属性写行内样式；

不允许在<style>  中使用@import外链样式表，主要是因为此方法引入的样式不支持js的dom操作；

2. 规范二，使用英文单词(或者首字母)、中划线和数字命名class类名。

不允许英文和拼音混合使用；

不允许使用下划线；

3. 规范三，使用内容或者功能来命名

如：nav，aside，news，search...

不根据表现形式来命名

如：left，center，red，block

4. 规范四，英文单词的缩写较能清晰保持原单词意思。

如：header => hd

description=> desc

5. 规范五，使用前缀命名

前缀	说明	示例
g-	全局通用样式	g-desc
m-	模块命名	m-hd
ui-	组件命名	ui-news
js-	纯交互的命名，不涉及任何样式规则	js-search

6. 规范六，样式只允许使用class

7. 规范七(生产环境下)，选择器与大括号之间保留一个空格；

      分号之后保留一个空格；

      逗号之后保留一个空格；

      所有规则换行；

      多组选择器之间换行；

8. 规范八，每条规则后必须加上分号。

9. 规范九，属性值为0，不加单位。

10. 规范十一，以0开头的小数，0不写。

11. 规范十二，去掉url中引用资源的引号。

12. 规范十三，颜色的取值小写.

13. 规范十四，写css时，属性遵循先布局后内容的顺序，如：

.g-desc {
    display: block;
    width: 780px;
    height: 120px;
    padding: 8px;
    border: 1px solid #888888;
    border-radius: 4px;
    background: #fff;
    font: 14px/1.6 sum
}

14. 规范十五，私有属性写在标准属性后面(向后兼容)，如：

.g-desc {
    -webkit-box-shadow: ...;
    -moz-box-shadow: ...;
    -o-box-shadow: ...;
    box-shadow: ...;
}

15. 规范十六，非必要，尽量减少使用hack。

不要使用属性级hack和选择符级hack，使用条件级：

<!--[if <keywords>? IE <version>?]>
<link rel="stylesheet" href="*.css" />
<![endif]-->

16. 规范十七，不使用标签名，类名当选择器。

CSS选择器是由右到左进行解析的，所以 div#doc 本身并不会比 #doc 更快

17. 规范十八，margin，padding，font这类能拆分的样式不建议拆分。

图像规范

1. 规范一，使用sprite来集合页面上的小图片，pc，m皆可。

2. 规范二，对图片进行适当的压缩再发布，在清晰度和大小之间，按照图片的需求寻找偏重点。