相关文章
博客原文
我的前端规范——开篇
我的前端规范——HTML篇
我的前端规范——CSS篇
我的前端规范——JavaScript篇
大纲
前言
1、css属性书写顺序
2、css属性写法
前言
规范对于一个项目来说是很重要的，统一的规范对代码的一致性、项目的质量、工作的协调都有很大的帮助，而且有时候可以规避很多意料不到的错误。
当然，规范是死的，人是活的。我总结的前端规范是我认为对我来说比较适合的，我又认可的，所以我能比较好的接受和使用。但是，不同的团队，不同的项目需要遵守的规范也许就是不一样的。规范的作用是让项目的代码看起来更有统一性，让团队的协作更方便，因此，根据具体的情况制定统一的规范才是最合理的，而这里我给出的也只是我认为比较符合我风格和习惯的，至于具体的规范还是要依据具体的情况来总结制定。
单独写成一篇的话篇幅很大，因此我会将我的总结写成：开篇、css、html、js四篇，让有需要的读者能够更方便的查找到想要的知识。
1、css属性书写顺序
1、显示属性
2、元素位置
3、元素属性
4、元素内容属性
.header {
/* 显示属性 */
display || visibility
list-style
position
top || right || bottom || left
z-index
clear
float
/* 自身属性 */
width
max-width || min-width
height
max-height || min-height
overflow || clip
margin
padding
outline
border
background
/* 文本属性 */
color
font
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
content
}
2、css属性写法
1、小图片（必须）sprite 合并（将需要用到的小图片全部放到一个大的图片上，通过定位来展示大图片上不同地方的小图片，从而减少图片占用的资源，加快网页加载的速度。）
2、每个样式属性后加 ";",方便压缩工具“断句”。
3、禁止将样式写为单行(单行显示不好注释，不好备注，这最后可以交给压缩工具处理)。
4、禁止使用行内（inline）样式。
5、禁止使用"*"来选择元素
（别这样写,这样写是没有必要的，一些元素在浏览器中默认有margin或padding值，但是只是部分元素，没有必要将所有元素的margin、padding值都置为0。）
* {
margin: 0;
padding: 0;
}
6、带前缀的属性
当使用特定浏览器带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
7、优化css选择器
css选择器是从右边到左边进行匹配的。如：
#header a {
color: #444;
}
/*
浏览器会检查整个文档中的所有链接，然后浏览器并不仅仅检查每个链接的父元素，还要遍历
文档树去查找 id 为 header 的祖先元素，如果被评估的链接不是 header 的后代，那么浏览
器就要向上一级遍历知道文档的根节点。针对此问题，有以下几个解决方法：
7.1、避免使用通配规则
除了传统意义的通配选择符之外还包括相邻兄弟选择符, 子选择符, 后代选择符和属
性选择符。推荐id、class和标签选择符。
7.2、不要限定id选择符
页面中指定一个id只能对应一个元素，所以没有必要添加额外添加限定符，
如： div#header ，应该简化为： #header（提权的除外）。
7.3、不要限定类选择器
不要用具体的标签限定类选择符，而是根据实际情况对类名进行扩展。例如：
ul.recommend ，改成 .recommend-list 或者 .list-recommend。
7.4、让规则越具体越好
尽量不要使用 ul li a 这样长的选择符，最好使用 .list-anchor 之类的选择符。
7.5、避免使用后代选择符
通常处理后代选择符开销最高，使用字选择符更高效，最好使用下一条代替。
7.6、避免使用标签子选择符
如果有如： #header > li > a，这样基于子标签的自选择符，那么应该使用一个
class来关联每个元素如： .header-anchor。尽量使用具体的类代替子选择符。
7.7、命名比较短的词，或者缩写的不允许直接定义样式，如：.title,.hd,.bd,.body.
必须用上级节点进行限定,如：.recommend-mod .title
*/
8、空格的使用，有些规则一定要执行，不仅是为了美观，同时是为了避免低版本的浏览器的bug
选择器与（ 之前必须要有空格
属性名的 ： 后必须要有空格
属性名的 ： 前禁止加空格
.hotel-content {
font-weight: bold;
}
9、多选择器规则之间必须换行
当样式针对多个选择器时每个选择器占一行
/* 推荐的写法 */
a.btn,
input.btn,
input[type="button"] {
......
}
10、禁止向0后添加单位（只是为了统一）
.obj {
left: 0;
}
