高质量CSS

---

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:

4.如何组织CSS文件
SMACSS意思是可扩展的CSS架构，这是一种组织CSS的有效方法。SMACSS有5部分组成：

• Base (基本)
• Layout（布局）
• Module (模块)
• State (状态)
• Theme (皮肤)

这5部分可以进行适当的删减，以适合自己的项目开发。我的方案：

Base+Layout+Common+Page

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的点符号
• 给一个元素添加样式的时候，多用-或者_新建一个类，而不用子类

不如

因为.last这个类可能在CSS中的其他地方被定义过，而user-lastItem是包的感觉，被定义过的可能性很小。

• 使用工程师名字的简写作为前缀

/**登陆模块**/
hjs-login{}
/**注册模块**/
hjs-login{}

5.3上下margin处理

• 规定所有的模块都使用margin-top或者margin-bottom，避免上下margin重叠
• 组件中不应该包含margin、border、padding等影响布局的样式，这些样式应该由新的类控制，比如：
  margin-top为10

<>

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**