规范与模块化-前端规范（CSS）

规范分类

1. 文件规范
2. 注释规范
3. 命名规范
4. 书写规范
5. 其他规范

---

文件规范

文件分类

通用类
通用类包括基础的样式、库、ui控件等一些可以通用的文件。
base\reset.css : 文件的样式
lib\jquery-ui.css : 第三方库
ui\editor.css : 大型控件
业务类
独立功能的模块放在单独文件夹内
album : 专辑
artist : 歌手

文件规范的思想就是讲相似功能的文件进行统一划分。
通用部分的思路
1.统一浏览器默认样式。
2.统一浏览器控件UI。
3.扩从可复用的第三方控件。

reset.css
统一所有浏览器样式，尽量做到在reset基础之上所有浏览器样式统一，这样就可以避免开发过程中不同浏览器默认样式的差异。

ui.css
浏览器默认样式的缺陷：
1.不同浏览器控件样式不同
2.不够好看
3.浏览器只提供了最基本的样式，在实际情况下我们需要开发更多的控件。

所以做ui控件是，重写所有默认的控件样式，然后在添加一些高度可复用的控件充实我们的ui控件库。

大型控件：
一般将比较大型且复杂的控件样式独立出来，这样便于管理和维护。

---

文件的引入

行内样式 : 不推荐
外联引入 : link
内联引入 : style
避免在css中使用 @import

---

文件本身

文件名 ： 由小写字母、数字、中划线组成
编码 ：UTF-8

---

注释规范

块状注释

• 统一缩进
• 在被注释对象之上

/*
 *  块级注释文字
 *  块级注释文字
 */
.m-list{width:500px;}

注释类容包括 功能介绍、作者信息。

单行注释

• 文字两端需要空格
• 在被注释对象之上

/* 单行注释文字 */
.m-list li em{color:#666;}

行内注释

• 文字两端需要空格
• 在分号之后

  .m-list li a{color:#333;/* 对color的行内注释 */}

---

命名规范

分类命名

反面教材

<!-- demo -->
<div class="header"></div>
<div class="section">
    <div class="article">
        <div class="header">...</div>
    </div>
</div>

/* 布局样式 */
.header{color : black;}

/* 文章样式 */
.article{color:blue;}
.article .header{font-size:12px}

这里的问题在于 header冲突。文章类的header会继承结构部分的css样式。

通过命名规范解决
<!-- demo -->
<div class="g-header"></div>
<div class="g-section">
    <div class="m-article">
        <div class="header">...</div>
    </div>
</div>
<div class="g-footer">...</div>

/* 布局样式 */
.g-header{color : black;}

/* 文章样式 */
.m-article{color:blue;}
.m-article .header{font-size:12px}

标签的命名先进行分类：
g- 开头的表示结构
m- 开通的表示模块

---

命名格式

• 大小写 （建议小写）
• 长度 （权衡长度和可读性）

语义化命名

• 以内容语义命名

书写规范

单行与多行 ： 个人喜欢单行书写CSS
空格： 2or4个空格
分号： 所有属性结束都要加分号

属性的顺序

显示属性 : display visibility postion float clear list-style top
自身属性 : width height margin padding border overflow min-width
文本属性和其他修饰 : font text-align text-decoration vertical-align white-space color background

顺序的思路，从布局=>盒子=>文本

Hack方式
统一各浏览器的Hack方式
IE6 => _property:value
IE6/7 => *property: value
不要滥用Hack