Css文件目录结构

一般一个网站会有这么三个样式：

• global.css | reset.css（格式化样式）
• common.css（公共组件样式）
• layout.css（当前页面样式）

global.css | reset.css（格式化样式）

清除全站所有页面的浏览器默认样式，保证在初始样式在所有浏览器下一致。

common.css（公共组件样式）

一般一个网站所有页面头部、底部样式都是一致的，而且很长时间不会有大的改变，改变的大概就是产品、运营的经常需要添加、去掉某些入口的需求，要保证全站所有页面头部一次替换生效，只要把头文件，已经对应的样式一发，马上生效，很快就有响应。

比如翻页、表单（输入框、按钮）等样式也是全站统一的，把这些样式都放到common.css里面，如果哪天所有的按钮样式要变更，一次替换就成功了。

layout.css（当前页面样式）

公共组件以外的所有样式都写到这个样式文件里面，并且保证一个页面一个独立样式，页面html和css写法要模块化，保证迅速响应项目频繁的迭代。

为什么要保证一个页面一个独立样式，而且要模块化，肯定有朋友和我有过一样的经历，修改一行样式代码，整个页面甚至N个页面都会受影响，搞了半天还 不知道哪里出了问题，返回到修改前的版本，就没问题了。终于找到原因了，却不能改以前的样式，更不能删除，只能增加，时间一长，css样式文件越来越大， 最后是不堪重负，整个页面代码只能重写。

其实global.css和common.css也可以合并到一个文件，毕竟格式化样式也就那么几十行代码，而且格式化样式、头部、底部样式每个页面都会用到。

这样每个页面就只有2个样式：

• common.css
• layout.css

如果common.css里面组件太多，而且很多组件也不是常用的，也可以像下面这样做：

• heads.css（格式话样式、头部、底部）
• common.css（公共组件样式）
• layout.css（当前页面样式）

一般情况下也只有2个样式，当需要用到组件的时候才去link组件样式，也不会有太多问题。

最后，不要把什么东西都往组件样式里面塞，有写东西宁愿每个页面重复拷贝也不要塞到组件样式里面去。某一天，你会发现这个组件样式大得让你可怕，而且很多都是无用的。

(http://www.cnblogs.com/wteng/p/5661122.html)