既非冠军，也非季军，亚军即中庸。

一、命名规范
1、常用的命名规则：

容 器：container/box
头 部：header
主 导 航：mainNav
子 导 航：subNav
顶 导 航：topNav
网站标志：logo
大 广 告：banner
页面中部：mainBody
底 部：footer
菜 单：menu
菜单内容：menuContent
子 菜 单：subMenu
子菜单内容：subMenuContent
搜 索：search
搜索关键字：keyword
搜索范围：range
标签文字：tagTitle
标签内容：tagContent
当前标签：tagCurrent/currentTag
标　 题：title
内 容：content
列 表：list
当前位置：currentPath
侧 边 栏：sidebar
图 标：icon
注 释：note
登 录：login
注 册：register

2、直观命名：
根据元素所在页面位置的词汇来命名。
比如：左边：left-side

3、自定义命名
根据模块的意义来命名：
比如：重要的新闻
.important-news{color:red}

在命名的时候切忌用中文拼音。

二、css样式书写顺序

1、显示属性
display/list-style/position/float/clear

2、自身属性
width/ height/margin/padding/border/background

3、文本属性
color/font/text-decoration/text-align/vertical-align/white-space

三、注释规范

1、行间注释:
直接写于属性值后面:
如：
.search{border:1px solid #fff;/*定义搜索输入框边框*/

2、整段注释：
如：
/*搜索条 begin*/
.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}
/*搜索条 end*/

3、协助注释：
如：
/*搜索条 begin[修改人；修改时间]*/
.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}
/*搜索条 end[修改人；修改时间]*/

四、给文件减肥

1、css样式的简写：
1)、颜色值的缩写;
2)、内外侧边框的缩写;
3)、 同一属性的缩写;
4)、不同的类相同属性及属性值的缩写；

2、提取公用部分样式：
几个不同的shtml/html文件需要用到公用的样式，可将这部分样式提取调用，不同的样式分模块分别调用。

3、利用可继承的值：
CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义，除非是为了更变当前元素样式不使用父元素的属性值，但是要注意，浏览器可能用一些默认值覆盖你的定义。

4、使用子选择器
子选择器可以减少shtml/html中大量的class定义，也使得CSS更加简洁、更加容易阅读。