Css规范

1.1 先写显示属性,再写自身属性,再写文字属性

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

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

//文本属性
color font text-decoration text-align vertical-align white-space other text content

1.2 core.css是全站基本样式。它需要放在所有CSS引用的最前面。它包括:标签reset、常用规则(链接、字体、隐藏、清浮动等)、布局、各种模块基本样式等

1.3 兼容多个浏览器时,将标准属性写在后面,如:
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px

1.4 命名规范

表示状态.on, .active, .selected, .hili

表示位置.first, .last, .main, .side

表示结构.hd, .bd, .ft, .col, .section

通用元素.tb, .frm, .nav, .list, .item, .tag, .pic, .info

1.5 使用after或overflow的方式清浮动

1.6 不要在CSS中使用 expression @import !important

1.7 绝对不要在CSS中使用 “*” 选择符

1.8 尽量避免使用CSS Hack

推荐使用下面的:

区别属性:

IE6 _property:value

IE6/7 *property:value

IE6/7/8/9 property:value\9

非IE6 property//:value

区别规则:

IE6 * html selector { … }

IE7 *:first-child+html selector { … }

非IE6 html>body selector { … }

firefox only @-moz-document url-prefix() { … }

saf3+/chrome1+ @media all and (-webkit-min-device-pixel-ratio:0) { … }

opera only @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { … }

iPhone/mobile webkit @media screen and (max-device-width: 480px) { … }

来源:https://code.google.com/p/mappn/issues/detail?id=1

相关资料

http://aliceui.com/css-spec/

Leave a Reply