CSS-css 多版本，多文件的存放问题

Question

做新网站了，有一大堆的CSS文件，有主页面的，有子页面的，有的CSS是通用的，有的只是单个页面才会用到的，反正就是一大堆的CSS，并且随着时间的推移，页面版式的修改，更多的CSS文件将会出现，各位，你们是如何解决CSS存在问题的呢？

Answer 1

我的感觉是把css放在一个文件夹，然后css层级划分和网页是一样的，然后再相互链接就可以了。。不过我做的网页数量都不是很多那种，不知道适不适合你

Answer 2

我提几个建议供参考：

1、定义你的CSS文件的命名约定，以防止冲突，定义大家一看文件名就知道在那里用的。比如home_page_header.css
2、布局功能规范，在一个项目开始前不但功能要规范，样式也要规范。比如一个页面的布局：头、尾、左右、中间等；
3、版本控制，大的项目有时候需要多人完成，避免冲突版本控制必须的，每人负责哪块分工明确
4、规范css文件样式：css文件中不允许使用通用标签。 每个开发人员应该只使用类和ID。 标签应包括在所有网页上。比如div标签，我们一般是这样来弄的：

首先把div公共样式放到common.css

div {
/* 所有div样式 */
}

我一个同事负责文章页的样式，他需要特殊处理文章页的div，所以他把样式放到article.css

div.something {
/*重新特殊样式 */
}

在article页面里再引入：

 link href="common.css"
link href="article.css"

Answer 3

我来说下我们的办法吧，我们一般有两种做法，一种是编译期合并，另一种是运行期合并

编译期合并
使用Ant或是Maven，在编译期写入脚本，做两件事情：
1. 遍历所有的HTML文件，获取到每个文件中所需的CSS(JS)脚本形成对应关系，例如：article.html包含x.css和y.css，将这两个文件合并生成一个css并以YUICompressor进行压缩并保存为article_style.css
2. 将原有的article.html中的css标签全部抹去，改为一个标签并指向article_style.css
JS用同样方式合并。需要注意的是如果你们的CSS需要区分media，则脚本需要按照不同的media来合并。另外，有些非常公用的css不应该和仅页面才有的CSS合并到一起，它们（如果有多个的话）应该合并成一个例如叫做common_style.css的文件以保证客户端缓存加速

运行期合并
编译期不需要做任何事情，但需要服务器代码配合，以Java为例
1. 首先将原来的HTML标签<link />和<script />改为TagLib标签（或是Freemarker/Velocity的标签）
2. 标签的逻辑中仅记录目标文件而不渲染出原始的HTML标签，例如a.css,b.css记录到一个List中
3. 待这些数据记录完，再进行以下操作
4. 如果是第一次访问此页面，则在后台将a.css和b.css合并到一个文件并生成缓存文件，存储到磁盘上例如叫article_style.css，以后再有请求时则检查article_style.css是否存在即可
5. 渲染出一个<link ... href="article_style.css" />的标签以告诉浏览器要加载的CSS名称