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

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

以上是内存溢出为你收集整理的CSS模块化之如果组织好css?全部内容，希望文章能够帮你解决CSS模块化之如果组织好css?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。