Maison >interface Web >tutoriel HTML >豆瓣网前端开发规范之-css开发规范_html/css_WEB-ITnose

豆瓣网前端开发规范之-css开发规范_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:36:211291parcourir

1. CSS浏览器支持标准


WinXP Win7 OS X
IE9 C C
IE8 A A
IE7 A A
IE6 A A
Chrome7 C C C
Chrome6 A A A
Chrome3 B B B
Firefox4 C C C
Firefox3.6 A A A
Firefox3.5 C C
Firefox3 C C
Safari B B B
Opera C C C

(注:根据2010年11月10日数据整理)

A级-交互和视觉完全符全设计的要求

B级-视觉上允许有所差异,不破坏页面整体效果

C级-可忽视视觉上的问题,但不防碍使用

2. 尽可能的通过继承和层叠重用已有样式

3. 根据新建样式的适用范围分为三级:全站级、产品级、页面级

3-1. 目前全站级的CSS文件仅有core.css和douban.css(向全站级CSS文件中添加规则参见4和5)。

3-2. 产品级CSS是指作用于某一垂直产品(如音乐、读书、电台等),文件放在css/下相应目录下。

页面级指仅在一个或少量几个页面中用到。如果仅在一个页面中用到的采用内联方式嵌入于页面head里,多于两个页面的放到外联的CSS文件中,该文件再放到相应的产品目录下。

4. core.css是全站基本样式。它需要放在所有CSS引用的最前面。它包括:标签reset、常用规则(链接、字体、隐藏、清浮动等)、布局、各种模块基本样式等

参见:http://img3.douban.com/css/packed_core1.css

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

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

6-1. 属性需要写在一行。需要在“{“和”}”前后加空格。

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

6-2. 多个(>2)selector每个占一行:

.selector1,

.selector2,

.selector3 { property:value;property:value; }

6-3. 兼容多个浏览器时,将标准属性写在后面,如:

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

7. 将作用于不同模块的CSS规则集中放在一起,同时用注释说明

注释的格式:

/* mod: doulist */

通用规则同样分类放在一起。通用规则在具体模块规则的前面。如:

/* button */



/* mod */



/* nav */



/* mod: events album */

8. ID和Class命名。命名不要用缩写,单词间用”-”做为连接符

8-1. ID是用来标识具体模块,命名必须具体且唯一,由前缀和名字组成。不要滥用ID。如: #db-video-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: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) { … }

10. 使用after或overflow的方式清浮动

11. 内联和外联的CSS都必须放在页面的head里。顺序是:全站级CSS,产品级CSS,页面级(外联)CSS,页面级(内联)CSS,内联CSS

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

如:

body > * {…}

ul > li > a {…}

#footer > h3 {…}

ul#top_blue_nav {…}

#searbar span.submit a { … }

13. 尽量避免使用filter

14. 不要直接修改标签的样式

如: div { … }

15. 不要在标签上直接写样式

如:

16. 不要在CSS中使用 expression

17. 不要在CSS中使用 @import

18. 不要在CSS中使用 !important

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


Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn