Douban CSS Code Guideline

1. CSS浏览器支持标准

WinXP

Win7

OS X

IE9

B

B

IE8

A

A

IE7

B

B

IE6

B

B

Chrome16

A

A

A

Chrome14

A

A

A

Firefox10

A

A

A

Firefox9

A

A

A

Safari

B

B

B

Opera

C

C

C

(注:根据2012年4月数据整理)

2. 重用已有的样式库。

3. CSS文件的目录管理

所有的CSS分为两大类:通用类和业务类。

基本样式库

/css/core

通用UI元素样式库

/css/lib

JS组件相关样式库

/css/ui

读书

/css/book/

电影

/css/movie/

音乐

/css/music/

社区

/css/sns/

小站

/css/site/

同城

/css/location/

电台

/css/radio/

九点

/css/newnine/

商务

/css/biz/

...

/css/产品名称

4. CSS的模块化组织

当前静态文件管理系统已支持SCSS和导入语法。开发中,应按功能分解大文件,实现模块化的文件组织。

5. 不要轻易改动全站级CSS和通用CSS库。改动后,要经过全面测试。

6. 单条CSS规则的书写格式要求

(注:在很长的文件中,单行形式有利于检索选择器)

.selector { property:value;property:value; }

简短规则声明(1或2个)也适用单行形式。

.selector { property:value; }

        .selector {
          property: value;
          property: value;
        }

CSS3兼容书写形式和对齐方式:

.selector {
 -webkit-box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
    -moz-box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
             box-shadow: 0 0 5px rgba(200, 200,200, 0.8);
}

CSS3中逗号分隔的长属性值:

.selector {
   box-shadow:
       1px 1px 1px #000,
       2px 2px 1px 1px #ccc inset;
   background-image:
       linear-gradient(#fff, #ccc),
       linear-gradient(#f3c, #4ec);
 }

       .selector1,
      .selector2,
      .selector3 { ... }

         -webkit-border-radius: 4px;
           -moz-border-radius: 4px;
                    border-radius: 4px;

7. 注释书写形式。

      /* mod: doulist
      * 一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十
      * abcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghijabcdefghij
      */

     SCSS中支持单行注释

// mod: doulist

         /* layout */
         ...

       /* mod */
       ...

      /* nav */
      ...

      /* mod: events album */
      ...

8. ID和Class命名。命名不要用缩写(除一些公认的缩写,见8-4),单词间用"-"做为连接符。

坏:

#rec
.gray-link
.broadsmr
.pl

好:

#db-nav-main
.infobox
.item

表示状态

.on, .active, .selected, .hili

表示位置

.first, .last, .main, .side

表示结构

.hd, .bd, .ft, .col, .section

通用元素

.tb, .frm, .nav, .list, .item, .tag, .pic, .info

9. 避免滥用CSS Hack。

推荐使用下面的:

区别属性:

IE6

_property:value

IE6/7

*property:value

IE6/7/8/9

property:value\9

区别规则:

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) { ... }

注意:SCSS会自动转换一些不标准的CSS写法,会破坏CSSHack。

10. 使用after或overflow的方式清浮动,不要在html里增加多余的标签。

11. CSS必须放在head里。

12. 避免使用低效的选择器。

如:

body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
.target #target-node { ... }

13. 避免使用filter

14. 避免直接定义标签的样式。如: div { ... }

15. 避免在标签上直接写样式。如:<div style="margin-bottom:30px;">

16. 避免在CSS中使用expression

17. 避免在CSS中使用@import

18. 尽量不要在CSS中使用!important

19. 绝对不要在CSS中使用"*"选择符

最后更新日期:20126月12