关于模块CSS的划分,我比较喜欢类似wordpress中的css划分方式,一般情况下通过类似下列结构划分:
layout.css /* 整站布局 */
public.css /* 公用组合样式 */
header.css /* 页面头部区域样式 */
sidebar.css /* 侧边栏区域样式 */
main.css /* 主体区域样式 */
footer.css /* 底部区域样式 */
index.css /* 首页区域特有样式 */
form.css /* 表单类样式 */
在刚学习CSS初期,就接触了"模块化CSS"这样的概念,不过,一直没有很好的理解。说起来,理由很简单:因为几乎所有的代码都是为了博客的设计,而像博客这么小的架构,CSS文件根本不用多,因为本身代码量就小,使用不同表现形式的页面模板并不多,少反而更方便管理。所以,对于模块化CSS的理解很乱,直接导致自己一直认为下面的分法是非常合理的:
引用片段:其实不然,最近工作,接触了公司的网站,leader要自己写CSS的写作规范,以及一些HTML的统一规范;并且写了新的频道/页面/卖场。才发现,原来,上面的分法还是太理想化了。以个人来说,个人认为可以用下面的分割法。先写下,然后,让我们对比这两种分法,找到更好的解决CSS文件管理的合适的CSS模块化分法:
reset.css // 对浏览器的默认样式进行重设
layout.css // 管理页面的布局
typeset.css // 图文的编排与
color.css // 统一管理颜色的搭配
print.css // 打印效果样式
ie.css // 把对ie的hack单独分开
引用片段:我们可以看到,不同的有三个CSS文件。第一种分法是种不错的做法,但管理起来比较麻烦,虽然是"模块化" 了,把表现的内容的样式分开。但由于每个人都不可能百分百了解每个CSS文件里面的内容,所以,可能导致下面的问题:
reset.css
header.css // 头部的所有样式
container.css // 除头部/底部外的中间区域样式
footer.css // 底部样式
print.css
ie.css