CSS模块化之假如组织好css?
发布时间：2018-10-13 12:11:39 所属栏目：创业 来源：站长网
导读：在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 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
