前端CSS开发工具_如何使用模块化让CSS开发更方便

前端开发用什么写css|html5 css3 前端开发|前端开发css文件模板

模块与模块之间尽量不要包含相同的部分,如果有相同的部分,应将它们提取出来,拆分成一个独立模块。

在拆分模块时,应将模块拆得尽可能简单,以提高弹性。模块功能越简单重用性越高!

模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。​

===========================================================================================================================================

组织css可以有多种角度,例如按功能划分。将控制字体的css放在font.css文件,把控制颜色的css集中在color.css文件,将控制布局的css放在layout.css中。又或者按区块划分。将头部CSS放在head.css。底部放在foot.css里,侧边栏放在sidebar.css里,主体放在main.css里。

这里推荐作者喜欢的一种组织CSS的方式。base.css+common.css+page.css。将网站内的所有样式按照职能分成base、common、page。任何网页的最终表现都是由这三者共同完成。这三者不是并列结构,而是层叠结构。

base层相对稳定,基本上不需要维护,可多次在不同网站上使用

common层是样式模块化,可以将页面内的元素拆分成一小块一小块功能和样式,大量重复的模块视为一个组件,放在common层里,​所以common层是网站级的,不同的网站有不同的common层,同一个网站只有一个common层。

page层

网站高度重用的模块视为“组件”放在common层,非高度重用的模块,可以放在page层,page层是页面级的,每个页面都会有自己的page层CSS。如果网站规模不过于庞大,建议将网站内所有page层的代码放在page.css文件里,而不是每个页面一个page1.css、page2.css。

当然page层越精简越好,能用base层与common层解决的就尽量不要用到page层。

page层代码可能由多人开发,如何避免冲突就是个需要注意的问题。通常会通过命名规则来避免这种冲突。​​

前端开发对模块化的认识|前端开发用哪个浏览器|前端开发 教程

» 本文来自:前端开发者 » 《前端CSS开发工具_如何使用模块化让CSS开发更方便》
» 本文链接地址:https://www.rokub.com/3859.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!