CSS编码规范

命名规则

使用类选择器,放弃ID选择器
ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用。

后代选择器命名

不允许单个字母的类选择器出现,比如.item {},原因如下。
通过使用后代选择器的方法,你不需要考虑他的命名是否已被使用,因为他只在当前模块中生效,同样的样式名可以在不同的模块或元件中重复使用,互不干扰;在多人协作或者分模块协作的时候效果尤为明显!。
后代选择器不需要完整表现结构树层级,尽量能短则短。

注:后代选择器不要在页面布局中使用,因为污染的可能性较大;

/* 这里的.itm和.cnt只在.m-list中有效 */
.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}
/* 这里的.cnt和.num只在.m-page中有效 */
.m-page{height:20px;}
.m-page .cnt{text-align:center;}
.m-page .num{border:1px solid #ddd;}

命名应简约而不失语义

/* 反对:表现化的或没有语义的命名 */
.m-abc .green2{}
.g-left2{}
/* 推荐:使用有语义的简短的命名 */
.m-list .wrap2{}
.g-side2{}

相同语义的不同类命名

方法:直接加数字或字母区分即可(如:.m-list、.m-list2、.m-list3等,都是列表模块,但是是完全不一样的模块)。

代码格式

省略url引用中的引号,其他需要引号的地方使用单引号。

.m-box{background:url(bg.png);}
.m-box:after{content:'.';}

属性编写顺序

  • 显示属性:display/list-style/position/float/clear …
  • 自身属性(盒模型):width/height/margin/padding/border
  • 背景:background
  • 行高:line-height
  • 文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
  • 其他:cursor/z-index/zoom/overflow
  • CSS3属性:transform/transition/animation/box-shadow/border-radius
  • 如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加,标准属性写在最后。
  • 链接的样式请严格按照如下顺序添加: a:link -> a:visited -> a:hover -> a:active

选择器等级

  • a = 行内样式style。
  • b = ID选择器的数量。
  • c = 类、伪类和属性选择器的数量。
  • d = 类型选择器和伪元素选择器的数量。
选择器等级(a,b,c,d)
style=”” 1,0,0,0
#wrapper #content {}0,2,0,0
#content .dateposted {}0,1,1,0
div#content {}0,1,0,1
#content p {}0,1,0,1
#content {}0,1,0,0
p.comment .dateposted {}0,0,2,1
div.comment p {}0,0,1,2
.comment p {}0,0,1,1
p.comment {}0,0,1,1
.comment {}0,0,1,0
div p {}0,0,0,2
p {}0,0,0,1

优化方案

值缩写

缩写值可以减少CSS文件大小,并增加可读性和可维护性。
但并非所有的值都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项。

/* 比如我们用下面这个样式来让某个定宽的容器水平居中,我们要的只是left和right,
 * 而top和bottom不是这个样式要关心的(如果设置了反倒会影响其他样式在这个容器上的使用),
 * 所以这时我们就不需要缩写
 */
.f-mgha{margin-left:auto;margin-right:auto;}
/* 比如下面这个模块的样式设置,我们确实需要设置padding的所有项,于是我们就可以采用缩写 */
.m-link{padding:6px 12px;}

使用16进制表示颜色值

比如颜色值#ffffff,尽量缩写。

.m-box{color:#fff;}

省略值为0时的单位

为节省不必要的字节同时也使阅读方便,我们将0px、0em、0%等值缩写为0。

统一语义理解和命名

语义命名简写
文档docdoc
头部headhd
主体bodybd
尾部footft
主栏mainmn
主栏子容器maincmnc
侧栏sidesd
侧栏子容器sidecsdc
盒容器wrap/boxwrap/box

语义命名简写
导航navnav
子导航subnavsnav
面包屑crumbcrm
菜单menumenu
选项卡tabtab
标题区head/titlehd/tt
内容区body/contentbd/ct
列表listlst
表格tabletb
表单formfm
热点hothot
排行toptop
登录loginlog
标志logologo
广告advertisead
搜索searchsch
幻灯slidesld
提示tipstips
帮助helphelp
新闻newsnews
下载downloaddld
注册registreg
投票votevote
版权copyrightcprt
结果resultrst
标题titlett
按钮buttonbtn
输入inputipt