1. 爱易网页
  2. CSS教程
  3. 前端CSS代码规范:19楼前端CSS代码规范

前端CSS代码规范:19楼前端CSS代码规范

日期：2013-11-21　 浏览次数：21119 次

网页制造aiyiweb文章简介：19UED前端CSS代码规范 V1.0.

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、 其他