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文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：/*主导航 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:5px;} 则可缩写为：
.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 和 widthf 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 关于高度的问题如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，而如果是静态的内容，高度最好定好。