我的前端规范——CSS篇

相关文章

　　简书原文：https://www.jianshu.com/p/e87bfd27ff59

　　我的前端规范——开篇：http://www.cnblogs.com/shcrk/p/9271561.html

　　我的前端规范——HTML篇：http://www.cnblogs.com/shcrk/p/9271613.html

　　我的前端规范——CSS篇：http://www.cnblogs.com/shcrk/p/9271608.html

　　我的前端规范——JavaScript篇：http://www.cnblogs.com/shcrk/p/9271620.html

大纲

　　前言
　　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;
}