co css规范
CSS 编码规范
1. 文件组织 (建议试试LESS)
1.1 CSS 与 HTML
-
CSS 一律写在 CSS 文件中，原则上不写内联样式。
-
CSS 文件命名由小写字母、下划线（_）组成。
-
CSS 文件通过 标签引入 HTML 文件，并放在文档头部即 <head> 标签中，不使用 @import。
1.2 CSS 定义结构
-
三层结构：
- 基础框架（reset.css/ 栅格系统等）
- 通用模块（网页主题/ 通用组件等）
- 页面样式（布局/ 覆盖等）
第一层一般是浏览器默认样式重置文件、栅格系统等基础样式；第二层一般是基于基础框架开发的通用模块样式或主题；第三层一般是针对网页布局、根据具体情况书写的或对通用模块进行覆盖的样式。
-
CSS 文件的引入顺序遵从“三层结构”，先引入基础框架，再引入通用模块，最后引入页面样式。
<!-- Recommended -->
<link href="assets/css/reset.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/grid.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/theme.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/common.css" rel="stylesheet" type="text/css"/>
<link href="assets/css/page.css" rel="stylesheet" type="text/css"/>
2. 命名规范
2.1 选择器命名
- CSS 对大小写敏感，规则命名采用小写字母加中划线（-）的方式。
/* Recommended */
.m-list {}
.u-btn {}
/* Not Recommended */
.mList {} /* 不采用驼峰式命名 */
.u_btn {} /* 不使用下划线 */
-
ID 选择器效率高但唯一，Class 选择器可重用，根据具体的需要进行选择。原则上不直接为标签添加样式（reset 除外），一般推荐使用 Class 选择器。
-
选择器命名必须有意义，使用英文单词或组合，能够明确地反映元素的模块或功能，不用抽象晦涩的命名。避免使用中文拼音，适当使用英文缩写。
/* Recommended */
.m-table {}
.u-chk {}
/* Not Recommended */
.biaoge {} /* 不用中文拼音 */
.u-abc {} /* 不使用没有语义的命名 */
- 不允许使用具体的样式名称命名，也不应包含颜色、位置等与现实效果相关的信息。
/* Not Recommended */
.black {} /* 不使用表现相关的命名 */
- 为 ID 和 Class 加上适当的命名空间（前缀），以避免命名冲突。命名空间不使用单个字母，以免与通用样式冲突。
/* Recommended */
.reg-user {}
.reg-psw {}
.login-user {}
.login-psw {}
2.2 通用样式命名规则
-
布局（grid）
.g-：用于网页布局，如头部、尾部、主体、侧边栏、主栏等。 -
模块（module）
.m-：用于定义可重用的整体，如列表、表格、选项卡、面板等。 -
元件（unit）
.u-：用于定义可重用的个体，如按钮、输入框、图标等。 -
功能（function）
.f-：定义一些常用的、有固定功能的样式，如清除浮动等。 -
状态
.z-：用于标识状态的样式，通常要与其他选择器配合使用，不单独定义。 -
皮肤（skin）
.s-：定义皮肤型的样式，如背景色（图）、边框色、文字色等，一般只应用于换肤型网站。 -
特殊用途
.j-：该命名作为JS中的选择器使用，不允许用来定义CSS样式。
/* Recommended */
/* 通用表格模块 */
.m-tbl {}
.m-tbl-hd {}
.m-tbl-bd {}
.m-tbl-ft {}
/* 定制企业表样式 */
.co-tbl .col1 {}
.co-tbl .col2 {}
/* 定制员工表样式 */
.stf-tbl .col1 {}
.stf-tbl .col2 {}
.u-btn {} /* 通用按钮原件 */
.u-btn.z-dis {} /* 不可操作的按钮样式 */
3. 书写规范
3.1 属性规范
- 采用多行书写格式。
- 选择器顶格，左大括号与选择器在同一行，与选择器相间一个空格；
- 每个属性单独占一行，缩进四个空格，以分号结尾；
- 属性名后紧跟冒号，属性值与冒号相间一个空格；
- 右大括号单独占一行结尾，顶格。
/* Recommended */
.m-box {
width: 200px;
height: 100px;
border: 1px solid #DDD;
}
-
使用属性缩写，提高代码执行效率和易读性。（详细查看性能优化 CSS 属性值缩写）
-
属性值为 0 时，单位可以省略。
/* Recommended */
.m-box {
margin: 0;
padding: 0;
}
- 属性值为小数时，小数点之前的 0 不可以省略。
/* Recommended */
.m-box {
margin: 0.8em;
}
- 省略 url 中的引号，其他需要引号的地方使用单引号。
/* Recommended */
.m-box {
background: url(bg.png);
}
.m-box:after {
content:'.';
}
- 颜色值采用十六进制的方式书写，可缩写的需要缩写，需透明度的使用 rgba()。
/* Recommended */
.m-box {
/* 对于不支持 rgba() 的如 IE8 及以下版本浏览器，按情况使用透明图片背景或 IE Filter */
background: rgba(0,0,0,0.5);
color: #FFF;
}
3.2 推荐的样式书写顺序
-
先是定位布局类等显示属性，再是盒模型等自身属性，然后是文本类及其它修饰类属性，最后是 CSS3 相关属性。其中，浏览器私有属性在前，W3C 标准属性在后。
| 显示属性 | display, visibility, position, float, clear, list-style, top 等 |
| 自身属性 | width, height, margin, padding, border, overflow 等 |
| 文本及修饰属性 | font, text-align, text-decoration, vertical-align, white-space, color, background 等 |
| CSS3 属性 | border-radius, box-shadow, gradients, transforms, animations 等 | -
链接的样式书写顺序遵从
LoVe HAte规则：
a:link -> a:visited -> a:hover -> a:active
3.3 推荐的注释格式：
- 文件注释
/*
* @description: xxxxx
* @author: erinxu
* @update: erinxu (2014-10-22 14:00)
*/
- 模块注释
/* module: xxxxx by erinxu */
- 单行注释
/* comments */
- 多行注释
/*
* comments line 1
* comments line 2
*/
- 特殊注释
/* TODO: xxxxx by erinxu 2014-10-22 14:10 */
/* BUGFIX: xxxxx by erinxu 2014-10-22 14:10 */
3.4 Hack使用
原则上不使用 Hack，通过合理的结构和样式避免出现兼容性问题。若无法避免，则要适当使用并统一规则。
/* IE7会显示灰色#888，IE6会显示白色#fff，其他浏览器显示黑色#000 */
.m-list {
color:#000;
*color:#888;
_color:#fff;
}
4. 性能优化
4.1 属性值缩写
- margin/padding
margin: 1px 2px 3px 4px; /* 上边距1px、右2px、下3px、左4px */
margin: 1px 2px 3px; /* 上1px、右2px、下3px、左2px*/(不建议三个值的写法)
margin: 1px 2px; /* 上1px、右2px、下1px、左2px*/
margin: 1px;
- border
/* border-width, border-style, border-color */
border: 1px solid #000;
- background
/* background-color, background-image, background-repeat, background-attachment, background-position */
background: #FFF url(img_tree.png) no-repeat right top;
- font
/* font-style, font-variant, font-weight, font-size, line-height, font-family */
font: italic small-caps bold 12px/30px Georgia, serif;
- color
color: #FFF; /* #FFFFFF缩写 */
color: #ABC; /* #AABBCC缩写 */
- list-style
/* list-style-type, list-style-position, list-style-image */
list-style: square outside url(bullet.gif);
4.2 避免耗性能的属性
/* expression */
.class {
width: expression(this.width>100?'100px':'auto');
}
/* filter */
.class{
filter: alpha(opacity=50);
}
4.3 选择器的合并
将定义了相同或大部分相同属性的CSS选择器合在一起声明，以缩小文件大小。
/* 将调用统一背景图片的选择器合在一起声明 */
.u-icon1,
.u-icon2,
.u-icon3 {
background:url(../images/sprite.png) no-repeat;
}
.u-icon1 {
background-position: 0 0;
}
.u-icon2 {
background-position: 10px 10px;
}
.u-icon3 {
background-position: 10px 50px;
}
4.4 图片优化合并
-
在不影响显示效果的情况下，压缩图片大小。色彩丰富且有透明要求，采用 png24 格式；色彩丰富无透明要求，采用 jpg 格式；色彩不丰富可采用 png24 格式；动态图片采用 gif 格式。
-
根据图片大小、颜色、模块等因素，对图片进行综合分类，将同类图片合并成一张。合并后图片大小不宜超过 50K，建议大小在 20K-50K 之间。
4.5 文件压缩
借助工具对CSS进行压缩，去除不必要的空格和换行，减小文件体积。
