CSS Code Guideline¶
尽可能的通过继承和层叠重用已有的样式
单条CSS规则的书写格式要求
属性要写在一行
需要在 “{” 和 “}” 前后加空格
多个selector各占一行
.selector1, .selector2, .selector3 { property:value; }
兼容多个浏览器时,将标准属性写在后面
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
注释的格式
/* =home-page ---------------------------------------------- */ /* =intro ---------------------------------------------- */ #home-page #intro { ... } /* ------------------------------------------- */ /* =featured articles & popular articles ---------------------------------------------- */ #home-page #featured-articles, #home-page #popular-articles { ... } /* ------------------------------------------- */ /* ------------------------------------------- */
ID和Class命名。命名不要用缩写,单词间用”-“做为连接符
ID是用来标识具体模块,命名必须具体且唯一,由前缀和名字组成。不要滥用ID。如: #db-video-list 。
Class是用来标识某一类型的元素,命名简洁表意清楚。如:.list。
推荐使用的class名
表示状态 .on, .active, selected, .hili 表示位置 .first, .last, .main, .side 表示结构 .hd, .bd, .ft, .col, .section 通用元素 .tb, .frm, .nav, .list, .item, .tag, .pic, .info
尽量避免使用CSS Hack
推荐使用下面的
IE6 _property:value IE6/7 *property:value IE6/7/8/9 property:value9 非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) { ... }
使用`after`或`overflow`的方式清浮动
内联和外联的CSS都必须放在页面的head里。顺序是:全站级CSS,产品级CSS,页面级(外联)CSS,页面级(内联)CSS,内联CSS
避免使用低效的选择器
例如
body > * {...} ul > li > a {...} #footer > h3 {...} ul#top_blue_nav {...} #searbar span.submit a { ... }
尽量避免使用filter
不要直接修改标签的样式
如: div { ... }
不要在标签上直接写样式
如: <div style=”margin-bottom:30px;”>
不要在CSS中使用 expression
不要在CSS中使用 @import
不要在CSS中使用 !important
绝对不要在CSS中使用 “*” 选择符