1. 属性写在一行内,属性之间、属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400px; height: 300px; }
. p3 q+ w1 i$ v) [2. 属性的书写顺序:7 b6 i' U+ e+ A. P8 L
2.1. 按照元素模型由外及内,由整体到细节书写,大致分为五组:8 I2 M" o1 `. A" ^# i4 M) r5 h
位置:position,left,right,float
5 O' n% X7 R9 m盒模型属性:display,margin,padding,width,height
4 V% r: U- G+ m边框与背景:border,background5 j% K# i' j. Z
段落与文本:line-height,text-indent,font,color,text-decoration,...
2 S+ [- e5 R! t7 U3 K0 N其他属性:overflow,cursor,visibility,...
6 W+ T% Z }3 Q2.2. 针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;( h+ h2 G! @- i
3. 谨慎添加新的选择符规则,尤其不可滥用 id,尽可能继承和复用已有样式( L! x* u3 u; S
4. 选择符、属性、值均用小写(格式的颜色值除外),缩写的选择符名称须说明缩写前的全称,例如 .cl -> clearfix
" H- ~$ D4 I! K% `5. 避免使用各种 css hack,如需对 ie 进行特殊定义,请参阅下节“关于 css hack 的说明”" @- @: ?) k: j' m
6. 勿使用冗余低效的 css 写法,例如:
$ F2 ^" D: ~4 ?2 Q* t* |ul li a span { ... }
& L0 A8 G* y$ Q( d7. 慎用 !important
6 S4 V& D+ p; S8. 建议使用在 class/id 名称中的词语
4 G. G9 m7 I9 w6.1. 表示状态:a->active
) A# R3 z6 m' u) r( H. z6.2. 表示结构:h->header,c->content,f->footer- R1 U# V8 T8 i
6.3. 表示区域:mn->main,sd->side,nv-navigation,mu->menu, E5 j0 n9 ]1 m; } Z
6.4. 表示样式:l-list,tab,p_pop& \: ?8 I! Z+ X) ^- y" ?3 c
9. 开发过程中的未定事项,须用 [!] 标出,以便于后续讨论整理
" p6 i7 K2 R R x+ |
/ W" m# t# L/ e; K n$ z5 ~& [7 I8 X更多网页制作信息请查看: 网页制作 |
|