如何组织css，写出高质量的css代码_html/css_WEB-ITnose

！如何组织css
一：css的API
　　属于基础部分，这部分的能力用“对”和“错”来评判。
　　比如说把文字设置为红色，只能用color：red；这种写法是对的，其他任何写法都是错的。

二：css框架
　　不能用“对”和“错”来评判，我们会用“好”、“比较好”、“很烂”、“非常棒”这样的字眼来评判。
　　按功能划分：控制字体的css集中在font.css文件里。
　　控制颜色的css集中在coloor.css文件里。
　　控制布局的css集中在layout.css文件里。
　　按区块划分：将头部的css放在head.css中。
　　将底部放在foot.css中。
　　将侧边栏放在sidebar.css中。
　　将主体放在main.css中。

！！不同角度的组织方法都有自己的道理，也有自己的缺点和优点。

笔者最喜欢的一种组织css的方法：base.css+common.css+page.css。
base（具有高度可移植性）
　　（base是三者的最底层，提供CSS reset功能和粒度最小的通用类——元子类。这一层会被所有页面引用，
是页面样式所需依赖的最底层。无论何种风格的设计都可以引用它，所以base层要力求精简和通用。
￥￥房子的地基。￥￥）
即按照智能分成：base、common、page。注意的是，这三者不是并列结构，而是层叠结构。
common（可移植性一般）
　　（bommon位于三者的中间，我们可以将页面内的元素拆分成一小块一小块功能和样式相对独立的小“模块”，
这些“模块”有些是会大量重复的，我们可以将大量重复的“模块”视为一个组件。从页面里尽可能
多的将组件提取出来，放在common层。网站中高度重用的模块视为组件，放在common层。
￥￥房子的门窗。￥￥
一个网站只有一个common层。common层是放在一个common.css文件里，还是按照功能划分放在
诸如common_form.css、common_imagelist.css的多个文件里，需要根据网站规模来
决定。）

page(几乎无移植性)
　　（page位于三者最高层，提供页面级的样式。￥￥房间内的装饰画。￥￥有page层的代码放在一个page.css文件里
，根据页面配上注释，分块书写，便于维护。如：
/*首页*/
.test1{}
.test2{}
/*关于我们*/
.test3{}
.test4{}
/*联系我们*/
.test5{}
.test6{}
！！page.css还是应当越精简越好，能用base层和common层的css解决的，就尽量不要用到page层。）