产品开发部社区项目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

单条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 */

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. 不要在标签上直接写样式 如：

无效的语言。

您需要指定一种语言，像这样: <source lang="html4strict">...</source>

语法高亮所支持的语言:

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic

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

17. 不要在CSS中使用 !important

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