CSS模块化之如果组织好css?

发布时间：2018-10-15 13:38:22 所属栏目：经验来源：站长网

导读：在w3ctech上闲逛,偶然看到了第一期讨论的话题网站重构中的文件组织,于是想写篇自己关于css组织的理解和想法,如下: 1.分类 1.1网站频道类 |--reset层:包含对样式重置,及一些常用样式名,如fl是float:left,tc是text-align:center; |--base层:包含header,menu,f

在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

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!