为什么组件化?
-
分层设计,代码复用,减少冗余;
-
维护方便,弹性好;
如何组件化?
目前代码分成三级:
-
第一级粒度最细,是基础,主要包含字体配置,颜色配置,UI框架(比如MUI或者pure.css);
-
第二级是组件层,项目中出现两次及以上的样式单独抽离成一个组件,如果组件小于15个,单独放到一个component.less文件中,大于15个(界限自己把握),考虑放到几个不同的less文件中。因为样有些样式依赖于一定的DOM,所以需要针对less文件写一个HTML文件一一对应后于组件对应的DOM;
-
页面层,剩余的样式,一个页面一个less文件,没啥多说的;
注意:上面第二条中把组件放到一个文件还是分开放是各有利弊的,分开存放的话好处是需要使用哪个组件就@import哪个组件,不会造成代码冗余,缺点是less文件以及对应的HTML文件较多,管理成本高。把组件合起来放呢,如果组件使用了less中的命名空间的话也不会造成代码冗余(推荐使用less的命名空间),管理文件的成本也小。
使用less实现模块化
目前为止,CSS没有模块化的实现机制,借助于less,可以实现模块化。
-
混合功能(复用的最直接体现);
-
嵌套功能,再也不需要写一堆的子代和后代选择器了,使用嵌套之后,样式的层级简单明了;
-
命名空间功能,这是模块化的利器,利用它,我们可以方便的构建组件,同时又不会把多余的东西释放到全局空间;
-
extend语法,当引用import进来的文件中的样式的时候,使用extend显示的指明,有点类似于C语言中的extern;
如果大家有更好的方案,欢迎留言交流,共同进步。