由 dawei 在w3ctech上闲逛,偶然看到了第一期讨论的话题"网站重构中的文件组织",于是想写篇自己关于css组织的理解和想法,如下:
1.分类
1.1网站频道类
|–reset层:包含对样式重置,及一些常用样式名,如fl是float:left,tc是text-align:center;
|–base层:包含header,menu,footer及一些常用组件,如popup,tip,banner等等;
|–channel层:常用频道层,即网站二级栏目,如forum,comic等等
|—-page层:如果channel层还有三级频道,则把此channel层再度分离,首先提取此频道的公用部分,做个page-public.css,此频道的主体分为page1-a,css,page1-b,page1-c…
1.2活动,专题类,不同于网站频道类,活动页面主体内容比较固定,上线时间短,故把活动分成模块,按需加载自己需要的模块.如
活动-评论模块 events-comment.css,活动-投票排行 events-vote.css,活动-注册模块 events-registration.css,活动-分页模块 events-page.css.
2.分层举例
2.1一般二级频道,如漫客频道,它的css结构为
|–reset.css
|–base.css
|–make.css
2.2大型二级频道,如动漫频道,内含三个子频道,则它的css结构为
|–reset.css
|–base.css
|–comic-public.css
|—-comic.css
|—-comic-cartoon.css
|—-comic-book.css
2.3一般性活动,含有注册,评论,投票模块(注:此处没有引用网站频道类中的base层)
|–reset.css
|–events-registration.css
|–events-comment.css
|–events-vote.css
3.团队合作
如A工程师和B工程师同时开发pk(二级频道),开发流程如下:
第一步:A和B讨论研究提取公共模块,如果已在base层里了,则直接从base层里取得,如果是新的公共模块,则添加到base层里.仅pk频道里的公共模块提取之后形成pk-public.css.
第二步:A工程师的css首先写在pk-a.css里,同样B写在pk-b.css,最后项目完成后,把pk-a.css和pk-b.css合并成pk-ab.css,为了减少冲突,A工程师的css以a为前缀,如.pk-a-title,.pk-a-main,.pk-a-a等等.
4.样式合并
如上举例中的2至少要引用四个css,如果增加其它应用,那么css文件数量是非常多的,那怎么处理呢?
QA阶段加载正常数量的css文件,上线之前把样式合并,并压缩.
推荐使用工具:"样式文件合并工具 mergeCSS".b