网页前端开发-19UED前端CSS代码规范

网页前端开发必须有一个规范和良好的习惯，下面就是图趣摘选的19楼UED组1.0版的css书写规范，供网页设计师参考。

1、申明及注释

• 1.1、文件头部必须加上文件申明信息，必须包括文件描述、作者、最后更新(更新人+时间)
   

  1. /*  
  2. *@Description: public common css （可写中文）  
  3. *@Author:      sev7n  
  4. *@Update:      sev7n(2011-08-09 17:22)  
  5. */  
• 1.2、CSS代码注释规范请参考UED前端注释规范.docx 文件

2、 编码

目前19楼页面主要使用gb2312编码，请注意保持CSS文件编码与页面编码一致（不要将CSS文件设置为utf-8等其他编码）。

为了防止文件合并及编码转换时造成问题，建议将样式中文字体名字改成对应的英文名字，如：黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei，几个单词中间有空格组成的必须加引号)

3、 命名规范

• 3.1、采用通俗易懂的英文单词并按内容/功能命名，严禁出现如left、right等方向名词的class/id，严禁出现如xxx1、xxx2等的数字class/id
• 3.2、除布局、唯一独立模块外建议少用id，必须保证id唯一性
• 3.3、一律采用小写中划线方式命名，如 xxx-yyy，禁止出现大写字母
• 3.4、尽可能提高代码模块的复用，复用模块、独立模块可按xxx-mod命名（-mod可不写），mod下面再取xxx-hd（头部）、xxx-bd（内容）、xxx-ft（底部）命名
• 3.5、常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等

4、 书写顺序

CSS书写建议按以下顺序：

• 4.1、显示属性
  display | position | float | clear | cursor …
• 4.2、盒模型
  margin | padding | width | height
• 4.3、文本属性
  vertical-align | white-space | text-decoration | text-align | color | font | content …
• 4.4、边框背景
  border | background
• 4.5、内容管理、层级
  overflow | z-index | zoom

5、 其他

• 5.1、禁止使用expression表达式
• 5.2、禁止滥用！important（使用前必须讨论确认不会造成其他BUG或者维护问题）
• 5.3、尽量少的使用滤镜，尽量减少hack数，能不hack的坚决不hack
• 5.4、层级(z-index)必须清晰明确，页面弹窗、气泡为最高级（最高级为999，如showWin、pop等），不同弹窗气泡之间可在三位数之间调整；普通区块为10-90内10的倍数；区块展开、弹出为当前父层级上个位增加，禁止层级间盲目攀比,如以下html结构：
   

  1. <ul class=“post-bd”>  
  2.     <li class=“post-to”>  
  3.         <div class=“post-tag”></div>  
  4.             <div class=“post-add”></div>  
  5.         </li>  
  6.     <li class=“post-editor”></li>  
  7.     <li class=“post-app”></li>  
  8. </ul>  

  (N)

   

  1. .post-to {z-index:999;}   
  2.     .post-tag {z-index:99;}   
  3.     .post-add {z-index:9;}   
  4. .post-editor {z-index:99;}   
  5. .post-app {z-index:9;}  

  (Y)

   

  1. .post-to {z-index:90;}   
  2.     .post-tag {z-index:99;}   
  3.     .post-add {z-index:98;}   
  4. .post-editor {z-index:80;}   
  5. .post-app {z-index:70;}  
• 5.5、保持代码的可读性与可维护性，代码必须缩进，CSS结构同html结构 (但不建议缩进太多，能大概看出结构即可)，选择器与{}之间必须有一个空格分隔，{}里不要出现多余的空格、换行

  (N)

   

  1. .post-to{z-index:999 ; }   
  2. .post-tag{z-index:99; }   
  3. .post-add{z-index:9 ;}  

  (Y)

   

  1. .post-to {z-index:999;}   
  2.     .post-tag {z-index:99;}   
  3.     .post-add {z-index:9;}  
• 5.6、在保证选择器准确的情况下尽量简化选择器 (尽量不超过4级)，不写多余的选择器(如class/id前的标签选择器、li上一级的的ul/ol、dt/dd上一级的dl等，在保证准确的前提下能去掉的都去掉)

  (N)

   

  1. div#post-to {}     
  2. .post-app dl dt {}   
  3. .post-app ul li.post-xxx {}  

  (Y)

   

  1. #post-to {}    
  2. .post-app dt {}   
  3. .post-app .post-xxx {}  
• 5.7、字体粗细采用具体数值，粗体bold写为700，正常normal写为400
• 5.8、能缩写的尽量缩写，如margin、padding、font(font-style font-variant font-weight font-size/line-height font-family)、border(border-width border-style border-color)、background(background-color background-image background-repeat background-attachment background-position)等

  (N)

   

  1. .post-tag {margin:2px;margin-right:5px;font-weight: bold;font-size:14px;line-height:24px;font-family:”黑体”;}  

  (Y)

   

  1. .post-tag { margin:2px 5px 2px 2px; font: 700 14px/24px ” 黑体”; }  
• 5.9、去掉0后面的单位（禁止出现如0px等多余的单位）、颜色值不要出现red/blue等颜色名词（一律采用#加16进制来表示，CSS3的rgb除外），不强制颜色值的大小写、不强制将6个字母的#颜色值缩写为3个。

  (N)

   

  1. .post-tag {margin:0px 0px 1px 1px;color:rgb(255,255,255);background: white;}  

  (Y)

   

  1. .post-tag {margin:0 0 1px 1px;color:#FFFFFF;background:#fff;}