1.引言
之前，写的CSS代码都非常乱吧，CSS文件混乱，代码没有模块化
2.目录
- 2.1DTD
- 2.2 如何组织CSS文件
- 2.3 模块化CSS——OOCSS编程
3.DTD
DTD全程是Document Type Defined ，意思是文档类型定义，作用是定义当前的HTML文档处于什么版本。浏览器会根据DTD使用不同的标准对HTML元素解析和CSS渲染。
特别是IE6/7，当页面没有声明DTD，那么就会使用浏览器的怪异模式，试图去兼容老版本的IE，怪异模式解析HTML和渲染CSS的时候不会按照W3C标准来进行，会带来很多问题。
推荐使用的DTD，兼容H5:
<!DOCTYPE html>
4.如何组织CSS文件
SMACSS意思是可扩展的CSS架构，这是一种组织CSS的有效方法。SMACSS有5部分组成：
- Base (基本)
- Layout（布局）
- Module (模块)
- State (状态)
- Theme (皮肤)
这5部分可以进行适当的删减，以适合自己的项目开发。我的方案：
Base
- 使用normalize.css
Layout
- 使用自己写的网格系统only-grid.css
- 专人维护
coommon
- 专人维护
- 可以根据网站请求，选择分开放，比如common-form.css，common-imgList.css，common-table.css。
- 也可以选择所有common放在同一个文件
common的作用就是模型，大多数常用的CSS功能都可以提炼到Common里面，不只是页面看到的模块，还包括常用的css类，比如.clearfix ，.zoom，w20，p10等，称之为通用原子类，下面是一些列表：
Page
每个页面都有对象的CSS文件，就是我们说的Page层，和Common一样。
可以将所有页面的Page层代码都放在一起，这可能适合于页面太多，导致Page.css太多而不便维护的情况。
也可以为每个页面建立一个Page.css文件
这里的common实际上就是SMACSS的Mudule，作用是页面模块的模型，只要Page.css(相当于控制器)直接调用即可（JavaScript也相当于这里的Page层，也很会调用Common和Base）。
5.模块化CSS——OOCSS编程
5.1提取页面模块
1)各个模块之间尽量不要有相同的部分
2）在模块数量较少的情况下，做到每个模块尽量地简单
5.2CSS命名空间
- 使用英文命名
- 使用大驼峰命名
- 使用-或者_作为命名空间分隔符，类似java的点符号
- 给一个元素添加样式的时候，多用-或者_新建一个类，而不用子类
<ul class="user">
<li></li>
<li></li>
<li class="lastItem"></li>
</ul>
不如
<ul class="user">
<li></li>
<li></li>
<li class="user-lastItem"></li>
</ul>
因为.last这个类可能在CSS中的其他地方被定义过，而user-lastItem是包的感觉，被定义过的可能性很小。
- 使用工程师名字的简写作为前缀
/**登陆模块**/
hjs-login{}
/**注册模块**/
hjs-login{}
5.3上下margin处理
- 规定所有的模块都使用margin-top或者margin-bottom，避免上下margin重叠
- 组件中不应该包含margin、border、padding等影响布局的样式，这些样式应该由新的类控制，比如：
margin-top为10
<div class="hjs-login margin-top-10"><>
margin-top为20
<div class="hjs-login margin-top-20"><>
5.4CSS sprite技术
CSS sprite称为CSS翻转技术，做法是将多张图片合成到一张图片上面，然后通过background-position选择对应的图片。
- 优点
减少请求，从而缩短响应时间和服务器压力 - 缺点
1）只是适用于背景图片，因为是通过background-position实现的。
2）对于横向平铺的，只能在纵向合并，对于纵向平铺的，只能横向合并
3）扩展性不好
5.5CSS常见问题
- 编码风格
1）多行式编码风格
div{
color:#fff;
font-size:12px;
}
多行式风格可读性好，但是来回滚动影响开发效率。
2） 单行式编码风格
div{color:#fff; font-size:12px;}
单行式风格可以加快开发效率（一眼就可以看到所有的CSS），但是可读性不高
- Id和class
少用Id,多用class，除非你真的确定该元素在页面中是唯一的。
label和input的时候使用id是必要的，因为这样才能绑定，更有语义化
- 解决锚点hover访问后样式不出现问题
原因是因为visited覆盖和hover，所以只要调整顺序就行
a{
color: #000;
}
a:hover{
color: red;
}
a:visited{
color: blue;
}
a:active{
color: yellow;
}
- haslayout
haslayout是什么
haslayout是IE排版引擎特有的，行内标签如果拥有haslayout，就具有块元素的排版特性。比如span标签触发haslayout之后就可以定义width和height等。触发haslayout
使用zoom：1就可以触发haslayout，如果不可以触发，就使用position:relative进行触发。
- 块元素和行内元素的区别
1） 块元素独占一行，行内元素不会
2）display可以改变元素的属性
- inline-block
IE6//7对display只支持block、inline和none，当display: inline-block的时候会触发haslayout。
inline-block实现块元素在同一行
- 居中
CSS居中
- z-index的相关问题以及Flash和IE6下的select
** - IE6 对png透明的bug**
