《Web前端开发修炼之道》笔记二：高质量CSS(一)

还需要深入了解的知识点：

1.CSS Reset

2.怪异模式

1.怪异模式和DTD

为了向后兼容，浏览器会有怪异模式和标准模式这两种方法来解析网页。怪异模式的解析方法是不符合W3C标准的，所以一般情况下要避免（通过在html文件开头声明文件的DTD类型）。

关于这个，之后要找更详细的资料阅读，再单独整理成文。

2.如何组织CSS

可以有多种方式，比如：按功能分，把控制字体的CSS集中在font.css,控制颜色的集中在color.css,控制布局的放在layout.css;或者按区块分，将头部的放在head.css,底部放在foot.css...

这里介绍一种 base.css+common.css+page.css的组织方式。

一个很生动的比喻：base像砖块，common像门窗，page就像是房间里的装饰画。

1.base层

提供css reset功能和粒度最小的原子通用类（关于css reset,之后也会单独整理一篇），这一层被所有的页面引用，是页面样式所需依赖的最底层。这一层的内容很少，所以可以放在一个文件里，如base.css。base层相对稳定，基本上不需要维护。

通用原子类是一系列常用的基本类，包括：文字、定位、长宽和边距。除了极少数特殊类，大多数原子类只含有一句CSS。如".f12{font-size:12px}"。 由于它们具有通用性，所以在保证命名具有语义的前提下，命名应该尽量简短，方便调用。

2.common层

关键字：模块化

common层是网站级的，不同的网站有不同的common层，同一个网站只有一个common层。common层是放在单独的common.css中还是按照功能划分为common_form.css、common_imagelist等，需要根据网站规模来定。

3.page层

page是页面级的，每个页面都可能会有自己的page层css。

base层基本不需要维护，common层修改的幅度不会很大，通常只由一个人维护。但到了page层，代码可能由多人开发，如何避免冲突是个需要注意的问题，通常我们通过命名规则来避免这种冲突。

如：

4.多用组合

3.上下margin

如果不确定模块的上下margin特别稳定，最好不要把它写在模块的类里，而是使用类的组合，单独为上下margin挂用于边距的原子类（如mt10,mb20）。模块最好不要混用margin-top和margin-bottom，统一使用margin-top或margin-bottom（因为上面模块的margin-bottom会和下面模块的margin-top产生重叠）。