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

WordPress 开发 WordPress 开发 主题:1098 回复:2322

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

偏爱自由 发布于 2017-01-17 字数 224 浏览 1102 回复 3

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

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(3

泛泛之交 2017-09-16 3 楼

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

泛泛之交 2017-06-02 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"

想挽留 2017-01-20 1 楼

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

编译期合并
使用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名称