Douban CSS 代码规范指南 - 文章教程

Douban CSS 代码规范指南

发布于 2021-09-06 字数 8350 浏览 908 评论 0

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 避免在标签上直接写样式。如:<div style=”height:100px”>


16 避免在CSS中使用 expression


17 避免在CSS中使用 @import


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


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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
81923 人气
更多

推荐作者

qq_iQVWB

文章 0 评论 0

gyhjy

文章 0 评论 0

dianjvnan

文章 0 评论 0