欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS组件化思考_html/css_WEB-ITnose

程序员文章站 2023-12-30 19:20:40
...
为什么组件化?
  • 分层设计,代码复用,减少冗余;

  • 维护方便,弹性好;

  • 如何组件化?

    目前代码分成三级:

    1. 第一级粒度最细,是基础,主要包含字体配置,颜色配置,UI框架(比如MUI或者pure.css);

    2. 第二级是组件层,项目中出现两次及以上的样式单独抽离成一个组件,如果组件小于15个,单独放到一个component.less文件中,大于15个(界限自己把握),考虑放到几个不同的less文件中。因为样有些样式依赖于一定的DOM,所以需要针对less文件写一个HTML文件一一对应后于组件对应的DOM;

    3. 页面层,剩余的样式,一个页面一个less文件,没啥多说的;

    注意:上面第二条中把组件放到一个文件还是分开放是各有利弊的,分开存放的话好处是需要使用哪个组件就@import哪个组件,不会造成代码冗余,缺点是less文件以及对应的HTML文件较多,管理成本高。把组件合起来放呢,如果组件使用了less中的命名空间的话也不会造成代码冗余(推荐使用less的命名空间),管理文件的成本也小。

    使用less实现模块化

    目前为止,CSS没有模块化的实现机制,借助于less,可以实现模块化。

  • 混合功能(复用的最直接体现);

  • 嵌套功能,再也不需要写一堆的子代和后代选择器了,使用嵌套之后,样式的层级简单明了;

  • 命名空间功能,这是模块化的利器,利用它,我们可以方便的构建组件,同时又不会把多余的东西释放到全局空间;

  • extend语法,当引用import进来的文件中的样式的时候,使用extend显示的指明,有点类似于C语言中的extern;

  • 如果大家有更好的方案,欢迎留言交流,共同进步。

    相关标签: CSS组件化思考

    上一篇:

    下一篇: