CSS Code Guideline

1. CSS浏览器支持标准

---

	WinXP	Win7	OS X
IE10	A	A
IE9	A	A
IE8	A	A
IE7	B	B
IE6	C	C
Chrome16	A	A	A
Chrome14	A	A	A
Firefox10	A	A	A
Firefox9	A	A	A
Safari	B	B	B
Opera	C	C	C

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

2. 重用已有的样式库

---

• 2-1. 主站全局CSS文件 - global.css
• 2-3. 当前使用的CSS库（持续更新）
  • util-01 通用导航条 /style/nav.css
  • util-02 通用footer /style/footer.css
  • ui-01. Confirmbxo /style/ui/Confirmbox.css
  • ui-02. widget(包括登陆框样式) /style/widget.css

3. CSS文件的目录管理

---

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

• 3-1.
• 通用的CSS文件，放在如下目录中：(地址http://is.kuaibo.com/sq/style/common)

基本样式库	/style/global, /style/common
JS组件相关样式库	/style/ui

• 3-2. 业务类的CSS是指和具体产品相关的文件，放在如下目录中：

首页	/style/passport/
雷达	/style/radar/
私有云	/style/webcloud/
云播放	/style/vod/
推推	/style/tt/
小二	/style/xiaoer/
...	/style/产品名称

• 3-3. 外联CSS文件适用于全站级和产品级通用的大文件。
• 3-4. 内联CSS文件适用于在一个或几个页面共用的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中支持单行注释(scss模板在所有产品的样式稳定后会逐步引入，便于开发css和管理，简化css的书写，使其结构化)

    // mod: nav or webcloud or panel

• 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中使用"*"选择符

---