CSS编码规范【整理】

1 基本规范

1.1 文件命名规范

基本样式：base.css

全局样式：global.css

框架布局：layout.css

字体样式：font.css

链接样式：link.css

打印样式：print.css

1.2 常用类Class规范

页眉：header 内容：content容器：container

页脚：footer 版权：cpright导航：nav

分页：pages 标志：logo留言：msg

标语：banner 标题：title边栏：sidebar

图标：icon 注释：note搜索：search

按钮：btn 登录：login链接：link

主导航：main-nav 子导航：sub-nav信息框：manage

说明：常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方注释。

对于二级类命名，则采用组合书写的模式，两个单词之间使用中横连“-”接，如：

搜索框：search-input

搜索图标：search-icon

搜索按钮：search-btn

1.3 派生选择器

可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时，也使结构更加的

清晰化，如：

.main-nav ul li {

background:url(images/bg.gif;)

}

1.4 辅助图片用背影图处理

这里的“辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、

提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：

.logo {

background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;

}

1.5 结构与样式分离

在页面里只写入文档的结构，样式写于css文件中，通过外部调用CSS实现结构与样式分离。

1.6 文档的结构化

书写页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：

<div class="main-nav ">

<ul>

<li><a href="#" >首页</a></li>

<li><a href="#" >介绍</a></li>

<li><a href="#" >服务</a></li>

</ul>

</div>

/*主导航 S*/

.main-nav {

width:100%;

height:30px;

background:url(images/mainMenu_bg.jpg) repeat-x;

}

.main-nav ul li {

float:left;

line-height:30px;

margin-right:1px;

cursor:pointer;

}

/*主导航 E*/

1.7 鼠标手势

在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为

“pointer”，即 cursor:pointer;

1.8 注释书写规范

a 整段注释。分别在开始及结束地方加入注释，如1.6中所示；

b 协助注释。非作者维护时所加入的表示修改时间、修改人等标识信息。在区域注释或单行

注释的基础上加上修改人和修改时间等信息。如：

区域注释

/* ** S 注释内容[修改人和修改时间] */

.class{...}

.class{...}

/* ** E*/

单行注释

.class{/* 注释内容[修改人和修改时间] */

}

1.9 样式属性代码缩写

a 不同类有相同属性及属性值的缩写

对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以

合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量

并易于控制。如：

.main-nav {

background:url(../images/bg.gif);

border:1px solid #333;

width:100%;

height:30px;

overflow:hidden;

}

.sub-nav {

background:url(../images/bg.gif);

border:1px solid #333;

width:100%;

height:20px;

overflow:hidden;

}

两个不同类的属性值有重复之处，刚可以缩写为：

.main-nav , .sub-nav {

background:url(../images/bg.gif);

border:1px solid #333;

width:100%;

overflow:hidden;

}

.main-nav {

height:30px;

}

.sub-nav {

height:20px;

}

b 同一属性的缩写

同一属性根据它的属性值也可以进行简写，如：

.search {

background-color:#333;

background-image:url(../images/icon.gif);

background-repeat: no-repeat;

background-position:50% 50%;

}

.search {

background:#333 url(../images/icon.gif) no-repeat 50% 50%;

}

c 内外侧边框的缩写

在CSS中关于内外侧边框的距离是按照[上右下左]的顺序来排列的，当这四个属性值不同时，

也可直接缩写，如：

.btn {

margin-top:10px;

margin-right:8px;

margin-bottom:12px;

margin-left:5px;

padding-top:10px;

padding-right:8px;

padding-bottom:12px;

padding-left:8px;

}

则可缩写为：

.btn {

margin:10px 8px 12px 5px;

padding:10px 8px 12px 5px;

}

而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可直接缩写为两个，如：

.btn {

margin-top:10px;

margin-right:5px;

margin-bottom:10px;

margin-left:5px;

}

缩写为：

.btn {

margin:10px 5px;

}

而当上下左右四个边框的属性值都相同时，则可以直接缩写成一个，如：

.btn {

margin-top:10px;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

}

缩写为：

.btn{

margin:10px;

}

d 颜色值的缩写

当RGB三个颜色值数值相同时，可缩写颜色值代码。如：

.menu {

color:#ff3333;

}

可缩写为：

.menu {

color:#f33;

}

1.10 hack书写规范

因为不同浏览器对W3C标准的支持不一样，各个浏览器对于页面的解释呈视也不尽相同，如

IE在很多情况下就与FF存在3px的差距，对于这些差异性，就需要利用css的hack来进行调整，

当然在没有必要的情况下，最好不要写hack来进行调整，避免因为hack而导致页面出现问题。

a IE6、IE7、Firefox之间的兼容写法

[写法一]

IE都能识别*；

标准浏览器(如FF)不能识别*；

IE6能识别*，但不能识别 !important,IE7能识别*，也能识别!important;

FF不能识别*，但能识别!important;

根据上述表达，同一类/ID下的CSS的hack可写为：

.search-input {

background-color:#333; /* 三者皆可 */

*background-color:#666　!important; /* 仅IE7 */

*background-color:#999; /* 仅IE6及IE6以下 */

}

一般三者的书写顺序为：FF、IE7、IE6。

[写法二]

IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可写为：

.search-input {

background-color:#333; /* 通用 */

_background-color:#666; /* 仅IE6可识别 */

}

[写法三]

*+html 与 *html 是IE特有的标签, Firefox 暂不支持。

.search-input {

background-color:#333;

}

*html .search-input {

background-color:#666;

} /* 仅IE6 */

*+html .search-input {

background-color:#555;

} /* 仅IE7 */

b 屏蔽IE浏览器

select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

*:lang(zh) select {

font:12px !important;

} /* FF的专用 */

select:empty {

font:12px !important;

} /* safari可见 */

c IE6可识别

通过CSS注释分开一个属性与值，注释在冒号前。如：

select {

display /* IE6不识别 */:none;

}

d IE的if条件hack写法

所有IE识别 <!–[if IE]> Only IE <![end if]–>

仅IE5识别 <!–[if IE 5]> Only IE 5.0 <![end if]–>

IE5及IE5.5都识别 <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>

仅IE6识别 <!–[if lt IE 6]> Only IE 6- <![end if]–>

IE5.x ~ IE6识别 <!–[if gte IE 6]> Only IE 6/+ <![end if]–>

仅IE7识别 <!–[if lte IE 7]> Only IE 7/- <![end if]–>

1.11 清除浮动

在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，此时，用

这个清除浮动的hack来对父级做一次定义，可以解决该问题。如：

select:after {

content:".";

display:block;

height:0;

clear:both;

visibility:hidden;

}

2 常见兼容问题

a DOCTYPE 影响 CSS 处理

b FF：div设置 margin-left, margin-right为 auto时已经居中, IE不行

d FF：body设置text-align，div需设置margin: auto(主要是margin-left,margin-right)

方可居中

e FF：设置padding后, div会增加 height 和 width, 但IE不会, 故需要用!important多设

一个 height 和 width

f FF：支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式

g div 垂直居中:vertical-align:middle;将行距增加到和整个DIV同高line-height:200px;

然后插入文字。缺点是要控制内容不要换行

h cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以

i FF: 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。

参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设height，可在

menubar 中插入一个空格。

j 在mozilla firefox和IE中的BOX模型解释不一致导致相差2px。解决方法：

div{

margin:30px !important;

margin:28px;

}

注意这两个margin的顺序一定不能写反，所以不可以只写margin:**px !important;

k ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义程序代码

ul{

margin:0;padding:0;

}

3 其他说明

a 检查CSS

检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。

CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

b 确定错误发生位置

如果错误影响了整体布局，则可逐个删除div块，直到删除某个div块后显示正常，即可确定

错误发生的位置。利用border属性确定出错元素的布局特性，使用float属性布局易出错。

这时为元素添加border属性确定元素边界，错误原因即水落石出

c float元素务必指定width属性

很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素内容如何，一定

要为其指定width属性。另外指定属性值时尽量使用em而不是px做单位。

d float元素不能指定margin和padding等属性

IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和

padding属性（可以在float元素内部嵌套一个div来设置margin和padding）。

也可以使用hack方法为IE指定特别的值。

e float元素的宽度之和要小于100%

如果float元素宽度之和为100%，某些老浏览器不能正常显示。因此保证宽度之和小于99%。

f 是否重设了默认的样式

某些属性如margin、padding等，不同浏览器会有不同的解释。因此在开发前首先将全体的

margin、padding设置为0、列表样式设置为none等。

g 关于高度的问题

如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，而如果是静态的内容，

高度最好定好。

================================================================================

关于更好的规范，可以参考Google的Google HTML/CSS Style Guide，网址是：

//google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml