Blueidea - 用户贡献 [zh-cn]

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

2011-03-28T04:44:16Z

TerranC：/* 关于z-Index值的设置范围说明 */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的CSS文件有:
#*/c/public/ui.css：统一浏览器默认样式、统一UI控件
#*/c/public/icon.css：公共icon样式
#*/c/public/common.css：一些关键的影响页面逻辑的样式
#*/c/public/validatorAuto.css：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
.selector { property:value;property:value; }
</source>
#多个(>2)selector每个占一行：
<source lang="css">
.selector1,
.selector2,
.selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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===
推荐使用下面的：

;区别属性：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:87px;">

IE6
</td>
<td style="width:537px;">

_property:value
</td>
</tr>
<tr>
<td style="width:87px;">

IE6/7
</td>
<td style="width:537px;">

*property:value
</td>
</tr>
<tr>
<td style="width:87px;">

IE6/7/8/9
</td>
<td style="width:537px;">

property:value\9
</td>
</tr>
<tr>
<td style="width:87px;">

非IE6
</td>
<td style="width:537px;">

property//:value
</td>
</tr>
</table>

;区别规则：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:165px;">

IE6
</td>
<td style="width:459px;">

* html selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

IE7
</td>
<td style="width:459px;">

*:first-child+html selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

非IE6
</td>
<td style="width:459px;">

html>body selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

firefox only
</td>
<td style="width:459px;">

@-moz-document url-prefix() { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

saf3+/chrome1+
</td>
<td style="width:459px;">

@media all and (-webkit-min-device-pixel-ratio:0) { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

opera only
</td>
<td style="width:459px;">

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

iPhone/mobile webkit
</td>
<td style="width:459px;">

@media screen and (max-device-width: 480px) { ... }
</td>
</tr>
</table>

===使用after或overflow的方式清浮动===
不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

===内联和外联的CSS都必须放在页面的head里===
顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression===
特别避免使用在单个页面会多次出现的元素样式上使用

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

===关于z-Index值的设置范围说明===
#窗体独占式layer（如：dialog、mask）: 800-1000
#非独占式页面遮罩layer：600-799
#普通tooltips：100-599
#非遮罩的定位需要：0-99

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

2011-03-28T03:09:46Z

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

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的CSS文件有:
#*/c/public/ui.css：统一浏览器默认样式、统一UI控件
#*/c/public/icon.css：公共icon样式
#*/c/public/common.css：一些关键的影响页面逻辑的样式
#*/c/public/validatorAuto.css：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
.selector { property:value;property:value; }
</source>
#多个(>2)selector每个占一行：
<source lang="css">
.selector1,
.selector2,
.selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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===
推荐使用下面的：

;区别属性：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:87px;">

IE6
</td>
<td style="width:537px;">

_property:value
</td>
</tr>
<tr>
<td style="width:87px;">

IE6/7
</td>
<td style="width:537px;">

*property:value
</td>
</tr>
<tr>
<td style="width:87px;">

IE6/7/8/9
</td>
<td style="width:537px;">

property:value\9
</td>
</tr>
<tr>
<td style="width:87px;">

非IE6
</td>
<td style="width:537px;">

property//:value
</td>
</tr>
</table>

;区别规则：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:165px;">

IE6
</td>
<td style="width:459px;">

* html selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

IE7
</td>
<td style="width:459px;">

*:first-child+html selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

非IE6
</td>
<td style="width:459px;">

html>body selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

firefox only
</td>
<td style="width:459px;">

@-moz-document url-prefix() { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

saf3+/chrome1+
</td>
<td style="width:459px;">

@media all and (-webkit-min-device-pixel-ratio:0) { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

opera only
</td>
<td style="width:459px;">

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

iPhone/mobile webkit
</td>
<td style="width:459px;">

@media screen and (max-device-width: 480px) { ... }
</td>
</tr>
</table>

===使用after或overflow的方式清浮动===
不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

===内联和外联的CSS都必须放在页面的head里===
顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression===
特别避免使用在单个页面会多次出现的元素样式上使用

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

===关于z-Index值的设置范围说明===
#窗体独占式layer（如：dialog、mask）: 800-1000
#窗体独占式layer（如：dialog、mask）: 800-1000
#非独占式页面遮罩layer：600-799
#普通tooltips：100-599
#非遮罩的定位需要：0-99

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

2011-03-10T08:29:07Z

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

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

2011-03-08T15:02:31Z

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

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
.selector { property:value;property:value; }
</source>
#多个(>2)selector每个占一行：
<source lang="css">
.selector1,
.selector2,
.selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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===
推荐使用下面的：

;区别属性：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:87px;">

IE6
</td>
<td style="width:537px;">

_property:value
</td>
</tr>
<tr>
<td style="width:87px;">

IE6/7
</td>
<td style="width:537px;">

*property:value
</td>
</tr>
<tr>
<td style="width:87px;">

IE6/7/8/9
</td>
<td style="width:537px;">

property:value\9
</td>
</tr>
<tr>
<td style="width:87px;">

非IE6
</td>
<td style="width:537px;">

property//:value
</td>
</tr>
</table>

;区别规则：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:165px;">

IE6
</td>
<td style="width:459px;">

* html selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

IE7
</td>
<td style="width:459px;">

*:first-child+html selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

非IE6
</td>
<td style="width:459px;">

html>body selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

firefox only
</td>
<td style="width:459px;">

@-moz-document url-prefix() { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

saf3+/chrome1+
</td>
<td style="width:459px;">

@media all and (-webkit-min-device-pixel-ratio:0) { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

opera only
</td>
<td style="width:459px;">

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

iPhone/mobile webkit
</td>
<td style="width:459px;">

@media screen and (max-device-width: 480px) { ... }
</td>
</tr>
</table>

===使用after或overflow的方式清浮动===
不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

===内联和外联的CSS都必须放在页面的head里===
顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression===
特别避免使用在单个页面会多次出现的元素样式上使用

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T15:01:48Z

TerranC：/* 单条CSS规则的书写格式要求 */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
.selector { property:value;property:value; }
</source>
#多个(>2)selector每个占一行：
<source lang="css">
.selector1,
.selector2,
.selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
-webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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===
推荐使用下面的：

;区别属性：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:87px;">

IE6
</td>
<td style="width:537px;">

_property:value
</td>
</tr>
<tr>
<td style="width:87px;">

IE6/7
</td>
<td style="width:537px;">

*property:value
</td>
</tr>
<tr>
<td style="width:87px;">

IE6/7/8/9
</td>
<td style="width:537px;">

property:value\9
</td>
</tr>
<tr>
<td style="width:87px;">

非IE6
</td>
<td style="width:537px;">

property//:value
</td>
</tr>
</table>

;区别规则：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:165px;">

IE6
</td>
<td style="width:459px;">

* html selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

IE7
</td>
<td style="width:459px;">

*:first-child+html selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

非IE6
</td>
<td style="width:459px;">

html>body selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

firefox only
</td>
<td style="width:459px;">

@-moz-document url-prefix() { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

saf3+/chrome1+
</td>
<td style="width:459px;">

@media all and (-webkit-min-device-pixel-ratio:0) { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

opera only
</td>
<td style="width:459px;">

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

iPhone/mobile webkit
</td>
<td style="width:459px;">

@media screen and (max-device-width: 480px) { ... }
</td>
</tr>
</table>

===使用after或overflow的方式清浮动===
不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

===内联和外联的CSS都必须放在页面的head里===
顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression===
特别避免使用在单个页面会多次出现的元素样式上使用

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:50:44Z

TerranC：/* 尽量避免使用CSS Hack */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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===
推荐使用下面的：

;区别属性：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:87px;">

IE6
</td>
<td style="width:537px;">

_property:value
</td>
</tr>
<tr>
<td style="width:87px;">

IE6/7
</td>
<td style="width:537px;">

*property:value
</td>
</tr>
<tr>
<td style="width:87px;">

IE6/7/8/9
</td>
<td style="width:537px;">

property:value\9
</td>
</tr>
<tr>
<td style="width:87px;">

非IE6
</td>
<td style="width:537px;">

property//:value
</td>
</tr>
</table>

;区别规则：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:165px;">

IE6
</td>
<td style="width:459px;">

* html selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

IE7
</td>
<td style="width:459px;">

*:first-child+html selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

非IE6
</td>
<td style="width:459px;">

html>body selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

firefox only
</td>
<td style="width:459px;">

@-moz-document url-prefix() { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

saf3+/chrome1+
</td>
<td style="width:459px;">

@media all and (-webkit-min-device-pixel-ratio:0) { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

opera only
</td>
<td style="width:459px;">

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

iPhone/mobile webkit
</td>
<td style="width:459px;">

@media screen and (max-device-width: 480px) { ... }
</td>
</tr>
</table>

===使用after或overflow的方式清浮动===
不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

===内联和外联的CSS都必须放在页面的head里===
顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression===
特别避免使用在单个页面会多次出现的元素样式上使用

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:49:14Z

TerranC：/* 尽量避免使用CSS Hack */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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===
推荐使用下面的：

__区别属性：__
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:87px;">

IE6
</td>
<td style="width:537px;">

_property:value
</td>
</tr>
<tr>
<td style="width:87px;">

IE6/7
</td>
<td style="width:537px;">

*property:value
</td>
</tr>
<tr>
<td style="width:87px;">

IE6/7/8/9
</td>
<td style="width:537px;">

property:value\9
</td>
</tr>
<tr>
<td style="width:87px;">

非IE6
</td>
<td style="width:537px;">

property//:value
</td>
</tr>
</table>

__区别规则：__
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:165px;">

IE6
</td>
<td style="width:459px;">

* html selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

IE7
</td>
<td style="width:459px;">

*:first-child+html selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

非IE6
</td>
<td style="width:459px;">

html>body selector { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

firefox only
</td>
<td style="width:459px;">

@-moz-document url-prefix() { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

saf3+/chrome1+
</td>
<td style="width:459px;">

@media all and (-webkit-min-device-pixel-ratio:0) { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

opera only
</td>
<td style="width:459px;">

@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { ... }
</td>
</tr>
<tr>
<td style="width:165px;">

iPhone/mobile webkit
</td>
<td style="width:459px;">

@media screen and (max-device-width: 480px) { ... }
</td>
</tr>
</table>

===使用after或overflow的方式清浮动===
不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

===内联和外联的CSS都必须放在页面的head里===
顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression===
特别避免使用在单个页面会多次出现的元素样式上使用

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:48:21Z

TerranC：/* ui.css是统一UI控件样式 */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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

|| Heading 1 || Heading 2
| ''Gobble'' | Bar
| [Main] | [SandBox]

__区别规则：__
|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

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression===
特别避免使用在单个页面会多次出现的元素样式上使用

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:47:55Z

TerranC：/* 不要轻易改动public下的CSS。必须要改动时，需进行集体沟通切全站反复测试 */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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

|| Heading 1 || Heading 2
| ''Gobble'' | Bar
| [Main] | [SandBox]

__区别规则：__
|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

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression===
特别避免使用在单个页面会多次出现的元素样式上使用

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:47:27Z

TerranC：/* 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度 */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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

|| Heading 1 || Heading 2
| ''Gobble'' | Bar
| [Main] | [SandBox]

__区别规则：__
|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

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression===
特别避免使用在单个页面会多次出现的元素样式上使用

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:47:04Z

TerranC：/* 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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

|| Heading 1 || Heading 2
| ''Gobble'' | Bar
| [Main] | [SandBox]

__区别规则：__
|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

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression===
特别避免使用在单个页面会多次出现的元素样式上使用

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:46:02Z

TerranC：/* 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用 */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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

|| Heading 1 || Heading 2
| ''Gobble'' | Bar
| [Main] | [SandBox]

__区别规则：__
|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===

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression===
特别避免使用在单个页面会多次出现的元素样式上使用

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:45:19Z

TerranC：/* 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用 */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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

|| Heading 1 || Heading 2
| ''Gobble'' | Bar
| [Main] | [SandBox]

__区别规则：__
|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===

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression===
特别避免使用在单个页面会多次出现的元素样式上使用

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:44:34Z

TerranC：/* 不要在标签上直接写样式 */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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

|| Heading 1 || Heading 2
| ''Gobble'' | Bar
| [Main] | [SandBox]

__区别规则：__
|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===

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用===

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:41:28Z

TerranC：/* 不要在标签上直接写样式 */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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

|| Heading 1 || Heading 2
| ''Gobble'' | Bar
| [Main] | [SandBox]

__区别规则：__
|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===

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用===

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：{<div style="margin-bottom:30px;">}

===不要在CSS中使用 !important===

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

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

2011-03-08T14:38:42Z

TerranC：/* 尽量避免使用CSS Hack */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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

|| Heading 1 || Heading 2
| ''Gobble'' | Bar
| [Main] | [SandBox]

__区别规则：__
|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===

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用===

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:37:09Z

TerranC：/* 尽量避免使用CSS Hack */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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===

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用===

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:30:49Z

TerranC：/* 尽量避免使用CSS Hack */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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===

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用===

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:24:40Z

TerranC：/* CSS浏览器支持标准 */

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

===CSS浏览器支持标准===
<table border="0" cellpadding="0" cellspacing="0">

<tr>
<td style="width:145px;">
 </td>
<td style="width:142px;">

WinXP
</td>
<td style="width:140px;">

Win7
</td>
</tr>
<tr>
<td style="width:145px;">

IE9
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

IE8
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE7
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

IE6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome7
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Chrome3
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox4
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.6
</td>
<td style="width:142px;">

A
</td>
<td style="width:140px;">

A
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3.5
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Firefox3
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
<tr>
<td style="width:145px;">

Safari
</td>
<td style="width:142px;">

B
</td>
<td style="width:140px;">

B
</td>
</tr>
<tr>
<td style="width:145px;">

Opera
</td>
<td style="width:142px;">

C
</td>
<td style="width:140px;">

C
</td>
</tr>
</table>
（注：根据2011年03月8日数据整理）
* A级－交互和视觉完全符全设计的要求
* B级－视觉上允许有所差异，不破坏页面整体效果
* C级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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===

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用===

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:19:47Z

TerranC：/* ID和Class命名 */

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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===

===避免使用低效的选择器===
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

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

===尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用===

===不要直接修改标签的样式===
如： div { ... }

===不要在标签上直接写样式===
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

===不要在CSS中使用 !important===

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

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

2011-03-08T14:17:49Z

TerranC：/* 将作用于不同模块的CSS规则集中放在一起，同时用注释说明 */

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
/*通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：*/
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如： 
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

17. 不要在CSS中使用 !important

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

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

2011-03-08T14:16:45Z

TerranC：/* 单条CSS规则的书写格式要求 */

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
#属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
#兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如： 
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

17. 不要在CSS中使用 !important

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

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

2011-03-08T14:15:58Z

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

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
#项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
#应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
: #属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
: #兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如： 
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

17. 不要在CSS中使用 !important

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

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

2011-03-08T14:15:24Z

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

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
# 项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
# 应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
: #属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
: #兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如： 
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

17. 不要在CSS中使用 !important

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

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

2011-03-08T13:22:12Z

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

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
# 项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
# 应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
: #属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
: #兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如： 
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

17. 不要在CSS中使用 !important

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

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

2011-03-08T13:21:41Z

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

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
#目前产品级的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：表单验证样式
: # 项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
: # 应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
: #属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
: #兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如： 
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

17. 不要在CSS中使用 !important

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

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

2011-03-08T13:21:01Z

TerranC：/* ID和Class命名 */

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
: #目前产品级的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：表单验证样式
: # 项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
: # 应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
: #属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
: #兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如： 
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：
<source lang="php">
<div style="margin-bottom:30px;">
</source>

17. 不要在CSS中使用 !important

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

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

2011-03-08T13:17:51Z

TerranC：/* ID和Class命名 */

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
: #目前产品级的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：表单验证样式
: # 项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
: # 应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
: #属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
: #兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如： 
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：<div style="margin-bottom:30px;">

17. 不要在CSS中使用 !important

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

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

2011-03-08T13:17:22Z

TerranC：/* ID和Class命名 */

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
: #目前产品级的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：表单验证样式
: # 项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
: # 应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
: #属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
: #兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如： 
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如： 
<source lang="html">
<div style="margin-bottom:30px;">
</source>

17. 不要在CSS中使用 !important

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

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

2011-03-08T13:13:48Z

TerranC：/* ID和Class命名 */

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
: #目前产品级的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：表单验证样式
: # 项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
: # 应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
: #属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
: #兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如：
<source lang="css">
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：<div style="margin-bottom:30px;">

17. 不要在CSS中使用 !important

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

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

2011-03-08T13:11:37Z

TerranC：

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
: #目前产品级的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：表单验证样式
: # 项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
: # 应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
: #属性需要写在一行。
<source lang="css">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
: #兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css">
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
<source lang="css">
如：
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
</source>

13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：<div style="margin-bottom:30px;">

17. 不要在CSS中使用 !important

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

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

2011-03-08T13:10:12Z

TerranC：

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
: #目前产品级的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：表单验证样式
: # 项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
: # 应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
: #属性需要写在一行。
<source lang="css" line="true">
: .selector { property:value;property:value; }
</source>
: #多个(>2)selector每个占一行：
<source lang="css" line="true">
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
</source>
: #兼容多个浏览器时，将标准属性写在后面，如：
<source lang="css" line="true">
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;
</source>

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
<source lang="css" line="true">
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */
</source>

===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
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如：
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：<div style="margin-bottom:30px;">

17. 不要在CSS中使用 !important

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

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

2011-03-08T13:06:55Z

TerranC：

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

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

===根据新建样式的适用范围分为四级：产品级、项目级、应用级===
: # 目前产品级的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：表单验证样式
: # 项目级应用于某一垂直产品（如星辰变、超级跑跑等），文件放在对应项目的样式文件夹内，与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：项目中临时存在的一些特殊样式
: # 应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的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规则的书写格式要求===
: #属性需要写在一行。
: .selector { property:value;property:value; }
: #多个(>2)selector每个占一行：
: .selector1,
: .selector2,
: .selector3 { property:value;property:value; }
: #兼容多个浏览器时，将标准属性写在后面，如：
: -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;

===将作用于不同模块的CSS规则集中放在一起，同时用注释说明===
注释的格式：
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */

8. ID和Class命名。命名不要用缩写。ID使用小驼峰式，如："topMessage", "userSearchForm", "mainWrap"；Class单词间用"_"做为连接符，如：” top_info”、” comment_module”。
• 8-1. ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。不要滥用ID。如： # userSearchForm。
• 8-2. Class是用来标识某一类型的元素，命名简洁表意清楚，对于应用级的Class，尽量避免太过通用的名称，以免与其它样式冲突。如：.content、.left。若一定要使用这类短命名，必须在样式中加上父级限定，且不会再嵌套过多标签。如：“.blog_detail .content”、“<a href=”#”></a>”
• 8-3. 注意语义化，尽量根据模块内容来命名，避免以样式表现来命名。
• 不好的：.green_link、.left_module
• 不错的：.comment_module、.sidebar、.photo_list
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如：
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：<div style="margin-bottom:30px;">

17. 不要在CSS中使用 !important

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

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

2011-03-08T12:56:52Z

TerranC：

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用

# 能的通过继承和层叠重用已有样式
# 据新建样式的适用范围分为四级：产品级、项目级、应用级
#前产品级的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：表单验证样式
3.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.3 应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的style.css文件（与应用的页面访问路径保持一直，如/app/vote/应用的样式对应在/c/app/vote/style.css），若需多个样式表，可自行在该style.css中@import相关样式。

4 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

5 不要轻易改动public下的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规则集中放在一起，同时用注释说明
注释的格式：
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */

8. ID和Class命名。命名不要用缩写。ID使用小驼峰式，如："topMessage", "userSearchForm", "mainWrap"；Class单词间用"_"做为连接符，如：” top_info”、” comment_module”。
• 8-1. ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。不要滥用ID。如： # userSearchForm。
• 8-2. Class是用来标识某一类型的元素，命名简洁表意清楚，对于应用级的Class，尽量避免太过通用的名称，以免与其它样式冲突。如：.content、.left。若一定要使用这类短命名，必须在样式中加上父级限定，且不会再嵌套过多标签。如：“.blog_detail .content”、“<a href=”#”></a>”
• 8-3. 注意语义化，尽量根据模块内容来命名，避免以样式表现来命名。
• 不好的：.green_link、.left_module
• 不错的：.comment_module、.sidebar、.photo_list
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如：
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：<div style="margin-bottom:30px;">

17. 不要在CSS中使用 !important

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

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

2011-03-08T12:55:16Z

TerranC：

产品开发部社区项目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级－可忽视视觉上的问题，但不防碍使用==

=尽可能的通过继承和层叠重用已有样式
3 根据新建样式的适用范围分为四级：产品级、项目级、应用级
3.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：表单验证样式
3.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.3 应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的style.css文件（与应用的页面访问路径保持一直，如/app/vote/应用的样式对应在/c/app/vote/style.css），若需多个样式表，可自行在该style.css中@import相关样式。

4 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

5 不要轻易改动public下的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规则集中放在一起，同时用注释说明
注释的格式：
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */

8. ID和Class命名。命名不要用缩写。ID使用小驼峰式，如："topMessage", "userSearchForm", "mainWrap"；Class单词间用"_"做为连接符，如：” top_info”、” comment_module”。
• 8-1. ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。不要滥用ID。如： # userSearchForm。
• 8-2. Class是用来标识某一类型的元素，命名简洁表意清楚，对于应用级的Class，尽量避免太过通用的名称，以免与其它样式冲突。如：.content、.left。若一定要使用这类短命名，必须在样式中加上父级限定，且不会再嵌套过多标签。如：“.blog_detail .content”、“<a href=”#”></a>”
• 8-3. 注意语义化，尽量根据模块内容来命名，避免以样式表现来命名。
• 不好的：.green_link、.left_module
• 不错的：.comment_module、.sidebar、.photo_list
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如：
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：<div style="margin-bottom:30px;">

17. 不要在CSS中使用 !important

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

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

2011-03-08T12:31:02Z

TerranC：以内容“产品开发部社区项目CSS开发规范 1 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 Fire...”创建新页面

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

1 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级－可忽视视觉上的问题，但不防碍使用
2 尽可能的通过继承和层叠重用已有样式
3 根据新建样式的适用范围分为四级：产品级、项目级、应用级
3.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：表单验证样式
3.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.3 应用级应用于某一社区项目内的单个应用，文件放在项目样式文件夹内的对应的路径下的style.css文件（与应用的页面访问路径保持一直，如/app/vote/应用的样式对应在/c/app/vote/style.css），若需多个样式表，可自行在该style.css中@import相关样式。

4 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

5 不要轻易改动public下的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规则集中放在一起，同时用注释说明
注释的格式：
/* module: 模块框 */
通用规则同样分类放在一起。通用规则在具体模块规则的前面。如：
/* button */
...
/* mod */
...
/* nav */
...
/* mod: events album */

8. ID和Class命名。命名不要用缩写。ID使用小驼峰式，如："topMessage", "userSearchForm", "mainWrap"；Class单词间用"_"做为连接符，如：” top_info”、” comment_module”。
• 8-1. ID是用来标识具体模块，命名必须具体且唯一，由前缀和名字组成。不要滥用ID。如： # userSearchForm。
• 8-2. Class是用来标识某一类型的元素，命名简洁表意清楚，对于应用级的Class，尽量避免太过通用的名称，以免与其它样式冲突。如：.content、.left。若一定要使用这类短命名，必须在样式中加上父级限定，且不会再嵌套过多标签。如：“.blog_detail .content”、“<a href=”#”></a>”
• 8-3. 注意语义化，尽量根据模块内容来命名，避免以样式表现来命名。
• 不好的：.green_link、.left_module
• 不错的：.comment_module、.sidebar、.photo_list
9. 尽量避免使用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) { ... }

10. 使用after或overflow的方式清浮动，不要添加单独的class（如：.clearfix）。且不在必要时不要对模块指定高度。

11. 内联和外联的CSS都必须放在页面的head里。顺序是：产品级CSS，项目级CSS，应用级CSS，页面级(内联)CSS。

12. 避免使用低效的选择器
如：
body > * {...}
ul > li > a {...}
#footer > h3 {...}
ul#top_blue_nav {...}
#searbar span.submit a { ... }
13. 尽量避免使用filter，特别避免使用在单个页面会多次出现的元素样式上使用。

14. 尽量避免在CSS中使用 expression，特别避免使用在单个页面会多次出现的元素样式上使用。

15. 不要直接修改标签的样式
如： div { ... }

16. 不要在标签上直接写样式
如：<div style="margin-bottom:30px;">

17. 不要在CSS中使用 !important

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