龙信思源（北京）科技有限公司
项目开发UI代码规范
文件编号：JS-KF-02
序号 1 变更记录 创建 修改 版本 V1.0.0 V1.1.0 修改人/日期 黎美娟2016-01-22 审核人/日期 辛文洁2016-01-22 批准人/日期 方兴周2016-2-24 实施日期 2016-2-24
目录
1. 2. 3.
文件规范 ................................................................................................................................... 1 注释规范 ................................................................................................................................... 2 命名规范 ................................................................................................................................... 4 3.1. 规范原则 ................................................................................................................... 4 3.2. 常用id的命名 ......................................................................................................... 5 3.3. 常用class的命名 ................................................................................................... 8 书写规范 ................................................................................................................................... 9 4.1. 排版规范 ................................................................................................................... 9 4.2. 属性编写规范 ........................................................................................................... 9 4.3. 规则书写规范 ......................................................................................................... 10 4.4. 代码性能优化 ......................................................................................................... 10 4.5. CSS Hack的使用 .................................................................................................... 11 4.6. 字体规则 ................................................................................................................. 12 其他规范 ................................................................................................................................. 12 测试规范 ................................................................................................................................. 13
4.
5. 6.
项目开发UI代码规范
1. 文件规范
1、文件均归档至约定的目录中。
所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中： ? 结构样式库 /css/lauout ? 基本样式库 /css/defaut ? 通用样式库 /css/public ? 私有样式库 /css/style
? 间距宽度样式库 /css/space {布局样式分离，提高样式重用率}
? JS组件相关样式库 /css/lib
业务类的CSS是指和具体产品相关的文件，放在如下目录中：
? 读书 /css/book/ ? 电影 /css/movie/ ? 音乐 /css/music/ ? 社区 /css/sns/ ? 小站 /css/site/ ? 同城 /css/location/ ? 电台 /css/radio/
2、文件引入可通过外联或内联方式引入。
1 /1 4 龙信思源— 源于数据，缔造价值
项目开发UI代码规范
? 外联方式：（类型声明type=”text/css”可以省略） ? 内联方式：（类型声明type=”text/css”可以省略） ? link和style标签都应该放入head中，原则上，不允许在html上直接写样式。避免在CSS中使用@import，嵌套不要超过一层。
3、文件名、文件编码及文件大小
? 文件名必须由小写字母、数字、中划线组成 ? 文件必须用UTF-8编码，使用UTF-8（非BOM），在HTML中指定UTF-8编码，在CSS中则不需要特别指定因为默认就是UTF-8。
? 单个CSS文件避免过大（建议少于300行）
2. 注释规范
1、文件顶部注释（推荐使用） /* * @description: 中文说明 * @author: name
* @update: name (2013-04-13 18:32) */ 2、模块注释
/* module: module1 by lmj*/ … /* module: module2 by lmj*/
模块注释必须单独写在一行
2 /1 4 龙信思源— 源于数据，缔造价值
项目开发UI代码规范
3、 单行注释与多行注释
/* this is a short comment */
单行注释可以写在单独一行，也可以写在行尾，注释中的每一行长度不超过40个汉字，或者80个英文字符。 /*
* this is comment line 1. * this is comment line 2. */
多行注释必须写在单独行内 4、特殊注释
/* TODO: xxxx by name 2013-04-13 18:32 */ /* BUGFIX: xxxx by name 2012-04-13 18:32 */ 用于标注修改、待办等信息 5、区块注释
/*------ Header ------*/ /* -------Footer -------*/ /* -------Gallery ------*/
对一个代码区块注释（可选），将样式语句分区块并在新行中对其注释。
3 /1 4 龙信思源— 源于数据，缔造价值
项目开发UI代码规范 - 图文
