网上看到的一些前端规范，结合自己的，整理了下，留着看看
javascript规范
1. 规则一，表示块开始的大括弧，不要另起一行(js 中，其他编程语言不熟)
对于编码是大括弧｛｝的位置，有人喜欢
block
{
...
}block{
...
}return
{
key: value;
}上面的代码原意是返回一个对象，但实际上是undefined；因为js在return后面添加了分号；变成了return; 后面的也就没了。
2. 规则二，调用函数的时候，函数名和左括号之间没有空格。
eg: fn(test)
函数名与参数序列之间没有空格。
eg: function fn(b) {...};
所有其他语法元素与左括号之间，都有一个空格。
eg: function fn(b) {...};
圆括号在js中有两种作用，一种表示函数，另一种表示不同的值的组合。不同的空格位置，可以区分两者。
3. 规则三，不要省略句末的分号！
a=b
(function() {
...
})();4. 规则四，with语句的少用
在另一篇讲作用域链的文章里有提过到，一个可以按序列检索的对象列表，通过with可以惊醒变量名解析。
with语句用语临时扩展作用域链，语法：
width(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
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 |
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]-->CSS选择器是由右到左进行解析的，所以 div#doc 本身并不会比 #doc 更快
17. 规范十八，margin，padding，font这类能拆分的样式不建议拆分。
图像规范
1. 规范一，使用sprite来集合页面上的小图片，pc，m皆可。2. 规范二，对图片进行适当的压缩再发布，在清晰度和大小之间，按照图片的需求寻找偏重点。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
