CSS编码规范

CSS代码风格规则

CSS代码有效性

使用有效的CSS代码。

命名

class应优先虑以这元素具体目的来进行命名，应尽量简短且富有含义。

统一采用小写英文字母、数字、“-” 的组合。其中不得包含汉字、空格和特殊字符。

/* 不推荐 */
.demoimage {}  /* "demo" 和 "image" 中间没加 "-" */

/* 不推荐 */
.error_status {}  /* 用下划线 "_" 是屌丝的风格 */

/* 推荐 */
.ads-sample {}

原则上，不建议缩写，除非一看就懂的缩写，如nav。

尽量避免使用id来控制样式。

框架css类命名清单

全屏：full_bg（全屏背景）
容器：wrapper（最外面的主框架）
页头：header（子项：h_1、h_2、……）
内容：container
页面主体：main
页尾：footer
导航：nav（子项：n_1、n_2、……）
菜单：menu（子项：m_1、m_2、……）
导航：nav（子项：n_1、n_2、……）
子菜单：submenu
侧栏：sidebar
栏目：column（扩展：column1、column2、……）
左右中：left、right、center
搜索：search
登陆：signin

选择器

避免出现过多的祖先选择器，各浏览器会有性能差异，消耗在选择器的时间也不尽相同。

尽量最多控制在3级以内。

/* 不推荐 */
ul.example {}
.example1 .example2 .example3 .example4 {}

/* 推荐 */
.example {}
.example1, 
.example2 {}

非必要的情况下不要使用元素标签名和ID或class进行组合。

/* 不推荐 */
ul#example {}
div.error {}

/* 推荐 */
#example {}
.error {}

简化css

写属性值的时候尽量使用缩写。

/* 不推荐 */
.example { 
  border-top-style:none; 
  font-family:Palatino, serif; 
  font-size:100%; 
  line-height:1.6; 
  padding-bottom:2em; 
  padding-left:1em; 
  padding-right:1em; 
  padding-top:0; 
}

/* 推荐 */
.example { border-top: none; font: 100%/1.6 Palatino, serif; padding: 0 1em 2em;}

属性值为0时，忽略单位

/* 不推荐 */
.example { margin:0px; padding:0px;}

/* 推荐 */
.example { margin:0; padding:0;}

属性值出现小数点忽略0

/* 不推荐 */
.example { font-size:0.8em}

/* 推荐 */
.example { font-size:.8em}

省略URI外的引号

/* 不推荐 */
.example { background-image: url("images/noise.png");}

/* 推荐 */
.example { background-image: url(images/noise.png);}

十六进制尽可能使用3个字符

/* 不推荐 */
.example { color: #eebbcc; }

/* 推荐 */
.example { color: #ebc; }

Hacks

尽可能地避免使用hack的方式解决浏览器样式兼容性问题。

尽量避免使用CSS filters。

CSS代码格式规则

单行书写

一个类一行，每个属性间用空格隔开，不用强制换行。

/* 不推荐 */
.example { 
  display:block; 
  float:left; 
  width:200px; 
  height:300px;padding:10px; 
}

/* 推荐 */
.example { display: block; float: left; width: 200px; height: 300px; padding: 10px;}

分隔选择器

每个选择器和声明都要独立新行。

/* 不推荐 */
a:focus, a:active { position: relative; top: 1px;}

/* 推荐 */
h1,
h2,
h3 { font-weight: normal; line-height: 1.2;}

属性名完结

出于一致性的原因，在属性名和值之间加一个空格（可不是属性名和冒号之间噢）。

/* 不推荐 */
h3 { font-weight:bold;}

/* 推荐 */
h3 { font-weight: bold; }

声明完结

考虑到一致性和拓展性，请在每个声明尾部都加上分号。

/* 不推荐 */
.test {
  display: block;
  height: 100px
}

/* 推荐 */
.test { display: block; height: 100px;}

css书写顺序

书写顺序按显示属性，自身属性，文本属性顺序。

显示属性

display
list-style
position
float
clear

自身属性

width
height
margin
padding
border
background

文本属性

color
font
text-decoration
text-align
vertical-align
white-space

Css Meta规则

编码

一般情况下编码同html的一致。

如果是urf-8，则不需要制定样式表的编码，因为它默认为urf-8。

注释

头部注释

注明本CSS的用处，生成时间及作者等信息。

/* CSS Document  
Use for:    website  
Version:    1.0 
Date:      time 
Author:     your name 
Update:      
*/

页面注释

有时候一份CSS会把首页和各种二级页面样式写在一起，这时需要做页面注释。

/*********************************** 
 * 首页 
 ***********************************/

分级注释

比如在main模块下，建立了news、photo等栏目，可使用分级注释，以指明层级结构。

/*----------------main-----------------*/
#main {}
.main-bg {}

/* news */
.news {}

/* photo */
.photo  {}

区块间注释

/* news */
.news {}

/* photo */
.photo  {}

修改注释

当后期维护中有修改到css，需添加修改的注释。

.news {} /* 修正横向滚动条错误 by your name */

常用技巧

样式初始化

/* CSS Reset */ 
body, 
div, 
span, 
object, 
input, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
p, 
blockquote, 
pre, 
a, 
abbr, 
acronym, 
address, 
big, 
cite, 
code, 
del, 
dfn, 
em, 
img, 
ins, 
kbd, 
q, 
samp, 
small, 
strong, 
sub, 
sup, 
tt, 
var, 
b, 
i, 
dl, 
dt, 
dd, 
ol, 
ul, 
li, 
fieldset, 
form, 
label, 
legend, 
table, 
caption, 
tbody, 
tfoot, 
thead, 
tr, 
th, 
td, 
hr { padding: 0; margin: 0; } 
table { border-collapse: collapse; border-spacing: 0; } 
caption{ text-align:left;} 
input,
select{ vertical-align:middle;} 
input,
textarea,
select{ font:12px Arial, Helvetica, sans-serif; } 
fieldset, 
img { border: 0; } 
address,
code,
caption,
th,
cite,
dfn,
em,
var{font-style:normal;} 
ol, 
ul { list-style: none; } 
h1, 
h2, 
h3, 
h4, 
h5, 
h6 { font-size: 100%; } 
q:before, 
q:after { content:""; } 
legend{ display:none;}

清除浮动

.clearfix:after{ content: ""; height: 0; visibility: hidden; display: block; clear: both;} 
.clearfix{ zoom: 1;}