产品开发部社区项目CSS开发规范

来自Blueidea
TerranC讨论 | 贡献2011-03-08T23:02:31的版本 根据新建样式的适用范围分为四级:产品级、项目级、应用级

跳转至: 导航搜索

产品开发部社区项目CSS开发规范

CSS浏览器支持标准

 

WinXP

Win7

IE9

C

C

IE8

A

A

IE7

A

A

IE6

A

A

Chrome7

C

C

Chrome6

A

A

Chrome3

B

B

Firefox4

C

C

Firefox3.6

A

A

Firefox3.5

C

C

Firefox3

C

C

Safari

B

B

Opera

C

C

(注:根据2011年03月8日数据整理)

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

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

根据新建样式的适用范围分为四级:产品级、项目级、应用级

  1. 目前产品级的CSS文件有:
    • /c/public/ui.css:统一UI控件
    • /c/public/base.css:统一浏览器默认样式
    • /c/public/icon.css:公共icon样式
    • /c/public/common.css:一些关键的影响页面逻辑的样式
    • /c/public/swp.css:自定义边栏样式
    • /c/public/validatorAuto.css:表单验证样式
  2. 项目级应用于某一垂直产品(如星辰变、超级跑跑等),文件放在对应项目的样式文件夹内,与public文件夹同级。如:/c/xcb/、/c/paopao/。
    • /c/xcb/ui.css:根据项目重置统一UI控件以及项目相关的可以抽离出来的独立UI控件样式。
    • /c/xcb/icon.css:项目设计的icon样式
    • /c/xcb/event.css:新鲜事模板样式
    • /c/xcb/skin.css:项目公共样式(可能在多个应用设计且难以抽离到ui.css里的相关样式)
    • /c/xcb/addition.css:项目中临时存在的一些特殊样式
  3. 应用级应用于某一社区项目内的单个应用,文件放在项目样式文件夹内的对应的路径下的style.css文件(与应用的页面访问路径保持一直,如/app/vote/应用的样式对应在/c/app/vote/style.css),若需多个样式表,可自行在该style.css中@import相关样式。

ui.css是统一UI控件样式

它包括常用的一些Web元素:模块框(.module)、标签(Tabs)、表单(table.edit)、按钮(.button)、浮动层(.dialog)、图文列表(ul.list、ul.list_inline)、简单列表(ul.lite、ul.lite_inline)、分页页码(.pager)、警示/提示框(.notice_box)、引用/评论(blockquote)、小箭头(. layer_arrow)、下拉菜单(. list_option)…… 参见:http://pic.static.sdo.com/xcb/sns/c/public/ui.css

不要轻易改动public下的CSS

必须要改动时,需进行集体沟通切全站反复测试

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

  1. 属性需要写在一行。
.selector { property:value;property:value; }
  1. 多个(>2)selector每个占一行:
.selector1,
.selector2,
.selector3 { property:value;property:value; }
  1. 兼容多个浏览器时,将标准属性写在后面,如:
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;

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

注释的格式:

/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如:*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */

ID和Class命名

命名不要用缩写。ID使用小驼峰式,如:"topMessage", "userSearchForm", "mainWrap";Class单词间用"_"做为连接符,如:” top_info”、” comment_module”。

  • ID是用来标识具体模块,命名必须具体且唯一,由前缀和名字组成。不要滥用ID。如: # userSearchForm。
  • Class是用来标识某一类型的元素,命名简洁表意清楚,对于应用级的Class,尽量避免太过通用的名称,以免与其它样式冲突。如:.content、.left。若一定要使用这类短命名,必须在样式中加上父级限定,且不会再嵌套过多标签。如:“.blog_detail .content”、“<a href=”#”></a>”
  • 注意语义化,尽量根据模块内容来命名,避免以样式表现来命名。
  • 不好的:.green_link、.left_module
  • 不错的:.comment_module、.sidebar、.photo_list


尽量避免使用CSS Hack

推荐使用下面的:

区别属性:

IE6

_property:value

IE6/7

*property:value

IE6/7/8/9

property:value\9

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

使用after或overflow的方式清浮动

不要添加单独的class(如:.clearfix)。且不在必要时不要对模块指定高度。

内联和外联的CSS都必须放在页面的head里

顺序是:产品级CSS,项目级CSS,应用级CSS,页面级(内联)CSS

避免使用低效的选择器

如:

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

尽量避免使用filter

特别避免使用在单个页面会多次出现的元素样式上使用

尽量避免在CSS中使用 expression

特别避免使用在单个页面会多次出现的元素样式上使用

不要直接修改标签的样式

如: div { ... }

不要在标签上直接写样式

如:

<div style="margin-bottom:30px;">

不要在CSS中使用 !important

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