WEB前端基础 文档的规范

关于 CSS文档规范

一、文件规范

1、文件均归档至约定的目录中（所有的CSS分为两大类：通用类和业务类。）

? 通用类的CSS文件，放在如下目录中：

1、核心样式库 /css/core

2、公用样式库 /css/lib

3、组件样式库 /css/ui

? 业务类的CSS文件，放在如下目录中：

1、/css/modules/cart

2、/css/modules/member

3、/css/modules/pay

? 具体CSS文件命名：

1、全局 global.css

2、布局 layout.css

3、主题 themes.css

4、皮肤 skin.css

5、表单forms.css

6、打印 print.css

2、文件引入方式（内联和外联）

外联方式： （类型声明 type=”text/css” 统一省略）

内联方式： （类型声明 type=”text/css” 统一省略且尽量不要使用此方式）

3、文件名、文件编码

文件名必须由小写字母、数字及中划线组成（起名用英文单词、不到万不得已禁止用拼音）

文件编码必须使用UTF-8（非BOM），如在HTML文档中指定了该编码则在CSS文档中不需要再次声明（@charset “utf-8”）

二、注释规范

1、文件顶部注释

/*

* @description: 中文描述

* @author: 创建人

* @update: 修改人 (2015-04-09 10:00)

*/

2、模块注释

/* module: 模块名 by 维护人 */

…

（中间必须空一行）

/* module: 模块名 by 维护人 */

…

3、单行注释与多行注释

单行注释：

/* 注释内容 */

?

多行注释：

/*

* 注释内容

* 注释内容

*/

三、命名规范

1、使用约定俗成或有意义的英文单词来对id及class进行命名，不到万不得已禁止使用拼音

2、全部小写，多个单词使用中划线连接（如： class=”cart-list-info”）

3、缩写要使用通俗易懂的，切记自造

4、严禁使用标签进行命名

5、禁止通过1、2、3等序号进行命名

6、避免id与class重名

7、id应用来标识模块或页面中某个父容器的区域，不要随便新建id

8、命名尽可能提高代码模块的复用

9、不到万不得已名称中禁止出现包含颜色（red、blue）、定位（left、right）等具体显示效果的信息（样式确定下来基本不会改动的除外）

10、可为选择器添加状态前缀或后缀（如：.no-post、submit-btn-disabled）

11、Javascript钩子尽量使用id属性

以下附上命名参考表，带井号表示必须为id，其余根据页面需要及复用情况自行选择

CSS命名参考表

命名 说明

**页面结构**

page 模板容器

content 用于最外层

wrapper 页面外围控制整体布局宽度

homepage 首页

header 页头

footer 页脚

layout 布局

main 页面主体

box 盒子容器

nav 主导航

subnav 子导航

menu 菜单

submenu 子菜单

sidebar 侧边栏

column 栏目

left center right 左中右

**页面常用**

title 标题

logo 网站Logo

crumb 面包屑

tag 标签

tab 选项卡

list 列表

info 信息

login 登录

register 注册

search 搜索

hot 热门

summary 摘要

banner 广告条

brand 品牌

tool 工具

drop 下拉

scroll 滚动

arrow 箭头

icon 图标

address 地址

btn 按钮

telphone 固定电话

mobile 手机

post 邮政编码

status 状态

results 结果

msg 通用提示

tips 小技巧

error 错误提示

copyright 版权信息

joinus 加入我们

aboutus 关于我们

partner 合作伙伴

service 服务

link 友情链接

download 下载

news 新闻

vote 投票

settlement 结算

plus 加

minus 减

number 数量

operation 操作

order 订单

delete 删除

add 加

molity 修改

check 查

submit 提交

process 流程

coupon 优惠劵

prev 上一页

next 下一页

parameter 参数

statistics 统计数据

unit 单位

msg 提示信息

current 当前的

note 注释

guild 指南

vote 投票

loginbar 登录条

shop 功能区

**产品相关**

product 产品

price 价格

price-current 当前价格

price-market 市场价

description或(desc) 描述

review 评论

待更新...

四、书写规范

1、排版规范

（1）统一使用tab键

（2）规则写成多行

排版约束： ?

每一条规则的大括号前必须添加空格

每一条规则结束的大括号必须与规则选择器的第一个字符对齐?

属性名冒号前不用添加空格，冒号之后必须添加空格

属性值后面必须添加分号

多个规则间必须空一行

多个selector共用一个样式集，则每个selector必须单独成行

例子如下：

cart {

width: 100px;

height: 100px;

}

pay,

buy {

width: 100px;

height: 100px;

line-height: 100px;

}

2、属性编写顺序

显示属性：display，visibility

位置属性：position，top，float等

盒子模型：width，height，margin，padding，border

文字系列：font，line-height，color，text-align，letter-spacing，white-space等

背景属性：background

其他属性：cursor，z-index，overflow等

css3属性：border-radius，box-shadow，transform，transition，animation等

css3属性需要加入浏览器厂商前缀需按照-webkit- / -moz- / std的顺序进行添加

链接的样式需严格按照如下顺序添加：a:link -> a:visited -> a:hover -> a:active

选择器等级

a = 行内样式style

b = id选择器的数量

c = 类、伪类和属性选择器的数量

d = 类型选择器和伪元素选择器的数量

选择器 等级（a，b，c，d）

Style=”” 1,0,0,0

wrapper {} 0,1,0,0

.content {} 0,0,1,0

p {} 0,0,0,1

wrapper .content {} 0,1,1,0

wrapper p {} 0,1,0,1

.content .comment {} 0,0,2,0

p.comment {} 0,0,1,1

div p {} 0,0,0,2

代码性能优化

合并margin、padding、border的-top/-right/-bottom/-left的设置

禁止使用*选择符

除非必须，否则，一般有class或id的，不需要再协商元素对应的标签

0后面不需要单位，如0px可以省略成0，0.8s可以省略成.8s

使用16进制表示颜色，则颜色取值需要使用小写

颜色尽可能用三位字符表示，如#ff6600写成#f60

设置没有边框时，不要写成border: 0，必须写成border: none

5、css Hack的使用

不到万不得已禁止使用hack，先尝试别的解决方法

6、字体规则

为防止文件合并及编码转换时造成问题，必须将中文字体名改成对应的英文名字或转义字符

字体粗细采用具体数值，如粗体bold写成700，正常normal写成400

五、其它规范

不要轻易改动全站级css和通用css库。改动后要经过全面测试

避免使用filter

避免使用expression

尽量不要使用！important

尽量不要设置容器的高度

背景图片优先考虑sprite技术

当图片色彩过于丰富且无透明要求时，建议采用jpg格式并保存为较高质量

当图片色彩过于丰富又有透明或半透明要求或阴影效果时，采用png24格式，如需兼容IE6则要进行png8退化（在不得已的情况下使用滤镜）

当图片色彩不太丰富时无论有无透明要求，一律采用png8格式 ? 当图片有动画时，只能采用gif格式