CSS文档规范

这是我一开始学习css时需要遵守的css规范，也是我一直到现在也在遵守的规范，顺便把它记录下来，方便查阅，同时也希望更多人知道这些规范。

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

3、选择器等级


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

4、代码性能优化


合并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格式