写CSS的基本规范和注意事项

作者:日期:2011-06-16 23:59:17 点击:290

1 . idclass命名采用该版块的英文单词或组合命名,并第一个单词小写,第二个单词首个字母大写,如:newRelease
2 . CSS样式表各区块用注释说明
3 . 尽量使用英文命名原则
4 . 不用加中杠和下划线
5 . 尽量不缩写,除非一看就明白的单词
6 . 检查HTML元素是否有拼写错误、是否忘记结束标记
7 . 检查CSS是否正确(可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误)
8 . 确定错误发生的位置
    如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置
9 . 利用border属性确定出错元素的布局特性
    使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出
10. float元素的父元素不能指定clear属性
11. float元素务必指定width属性
    很多浏览器在显示未指定widthfloat元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。
    另外指定元素时尽量使用em而不是px做单位。
12. float元素不能指定marginpadding等属性
    IE在显示指定了marginpaddingfloat元素时有bug
13. float元素的宽度之和要小于100%
14. 是否重设了默认的样式?
    某些属性如marginpadding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的marginpadding设置为0、列表样式设置为none
15.floatdiv一定要闭合。
    为了让高度能自动适应,要在wrapper里面加上overflow:hidden;当包含floatbox的时候,高度自动适应在IE下无效,这时候应该触发IElayout私有属性(万恶的IE啊!)zoom:1;可以做到,这样就达到了兼容。
例如某一个wrapper如下定义:
程序代码.colwrapper{overflow:hidden;
zoom:1;
margin:5px auto}
16.margin加倍的问题。
    设置为floatdivie下设置的margin会加倍。这是一个ie6都存在的bug解决方案是在这个div里面加上display:inline
17.关于容器的包涵关系
    很多时候,尤其是容器内有平行布局,例如两、三个floatdiv时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
18.关于高度的问题
    如果是动态地添加内容,高度最好不要定义。浏览器可以自动伸缩,然而如果是静态的内容,高度最好定好。(似乎有时候不会自动往下撑开,不知道具体怎么回事)

上一篇: hack书写规范:IE6、IE7、Firefox之间的兼容写法

下一篇: 如何正确理解并应用HTML标签语义做网站布局