CSS组件化思考_html/css_WEB-ITnose
程序员文章站
2023-12-30 19:20:40
...
为什么组件化? 如何组件化?
分层设计,代码复用,减少冗余;
维护方便,弹性好;
目前代码分成三级:
-
第一级粒度最细,是基础,主要包含字体配置,颜色配置,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;
如果大家有更好的方案,欢迎留言交流,共同进步。
推荐阅读
-
怎么把button按钮设为超链接_html/css_WEB-ITnose
-
关于微信订阅号获取openid的问题_html/css_WEB-ITnose
-
CSS中!important的用法和在IE6下的表现_html/css_WEB-ITnose
-
纯CSS实现表单验证_html/css_WEB-ITnose
-
基于淘宝弹性布局方案lib-flexible的问题研究_html/css_WEB-ITnose
-
求助个问题~~特别急~~在线等待~~~大神帮忙~~~_html/css_WEB-ITnose
-
《千与千寻》给读者带来了什么?_html/css_WEB-ITnose
-
CSS3实战开发:手把手教大家折角效果实战开发_html/css_WEB-ITnose
-
li空格问题_html/css_WEB-ITnose
-
CSS3实现了提交按钮等待打点循环效果_html/css_WEB-ITnose