(转)豆瓣网前端开发规范之 【CSS】

Douban CSS Code Guideline

来源：https://github.com/kejun/CSS-Code-Guideline#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月数据整理）

• A级－交互和视觉完全符全设计的要求
• B级－视觉上允许有所差异，但不破坏页面的整体效果
• C级－可忽略设计上的细节，但不防碍使用

2. 重用已有的样式库

• 2-1. 主站全局CSS文件 - douban.css (注意：新项目中不推荐使用)
• 2-2. 兼容主站的全局CSS文件 - /css/core/init.css
• 2-3. 当前使用的CSS库（持续更新）
  • util-01 reset /css/core/reset.css
  • util-02 通用模块容器 /css/core/mod.css
  • ui-01. 喜欢按钮 /css/core/fav_btn.css
  • ui-02. 视频/相册列表项 /css/core/media_item.css
  • ui-03. 评星 /css/core/rating.css
  • ui-04. 通用按钮 /css/core/common_button.css
  • ui-05. 分页 /css/core/pagination.css
  • ui-06. 推荐按钮 /css/core/rec_btn.css
  • ui-07. 老版对话框 /css/core/old_dialog.css
  • ui-08. 老版Tab /css/core/old_tab.css
  • ui-09. 老版成员列表 /css/core/old_userlist.css
  • ui-10. 老版信息区 /css/core/notify.css
  • ui-11. 社区用户导航 /css/core/profile_nav.css
  • ui-12. 当前大社区导航 /css/core/site_nav.css
  • ui-13. 加载中 /css/lib/loading.css

3. CSS文件的目录管理

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

• 3-1. 通用的CSS文件，放在如下目录中：

  基本样式库	/css/core
  通用UI元素样式库	/css/lib
  JS组件相关样式库	/css/ui

• 3-2. 业务类的CSS是指和具体产品（如音乐、读书等）相关的文件，放在如下目录中：

  读书	/css/book/
  电影	/css/movie/
  音乐	/css/music/
  社区	/css/sns/
  小站	/css/site/
  同城	/css/location/
  电台	/css/radio/
  九点	/css/newnine/
  商务	/css/biz/
  ...	/css/产品名称

• 3-3. 外联CSS文件适用于全站级和产品级通用的大文件。

• 3-4. 内联CSS文件适用于在一个或几个页面共用的CSS。利用模板系统支持的istatic方法引用。

• 3-5. 模块依赖的CSS和模块放在一起。利用模板系统支持的collect_css过滤器实现。

4. CSS的模块化组织

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

• 使用和完善现有CSS库（见2-4）。
• 单个CSS文件避免过大（建议少于300行）。
• CSS文件嵌套不要超过一层

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

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

• 6-1. 单行形式适用于直接写在页面中和长文件的情况。声明写在一行。需要在“{"和"}”前后加空格。 （注：在很长的文件中，单行形式有利于检索选择器）

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

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

    .selector { property:value; }

• 6-2. 格式化书写形式。适用于不是很长的模块文件或CSS3语法。冒号后加空格。

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

• 6-3. 多个(>2)selector每个占一行：

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

• 6-4. 规则声明的顺序：定位、盒模型（width/height/padding/border/margin）、行高、字体/字号/颜色、背景、CSS3效果等

• 6-5. 兼容多个浏览器时，将标准规则声明写在后面，如：

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

7. 注释书写形式

• 7-1. 注释内容单行控制在40个中文或80个英文字符宽。注释的格式：

     /* 
      * mod: doulist 
      * 描述内容
      */

SCSS中支持单行注释

    // mod: doulist

• 7-2. 规则分类放在一起。通用规则在具体业务规则的前面。如：

    /* layout */
    ...
    /* mod */
    ...
    /* nav */
    ...
    /* mod: events album */
    ...

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

• 8-1. ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。不要滥用ID。如： #db-video-list、#group-member-list等。
• 8-2. Class是用来标识某一类型的对象，命名简洁表意清楚。如：.list。
• 8-3. 命名示例：

坏：

    #rec
    .gray-link
    .broadsmr
    .pl

好：

    #db-nav-main
    .infobox
    .item

• 8-4. 推荐使用的class名：

  表示状态	.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写法，会破坏CSS Hack。

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. 避免在标签上直接写样式。如：

16. 避免在CSS中使用expression

17. 避免在CSS中使用@import

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

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

转载于:https://www.cnblogs.com/Shane-Chow/archive/2012/07/10/2584713.html