CSS组件化思考_html/css

来源：懂视网责编：小采时间：2020-11-27 16:08:46

CSS组件化思考_html/css

CSS组件化思考_html/css_WEB-ITnose:为什么组件化？分层设计，代码复用，减少冗余；维护方便，弹性好；如何组件化？目前代码分成三级：第一级粒度最细，是基础，主要包含字体配置，颜色配置，UI框架（比如MUI或者pure.css）；第二级是组件层，项目中出现两次及以上的样式单独抽离

推荐度：

点击下载本文 文档为doc格式

导读CSS组件化思考_html/css_WEB-ITnose:为什么组件化？分层设计，代码复用，减少冗余；维护方便，弹性好；如何组件化？目前代码分成三级：第一级粒度最细，是基础，主要包含字体配置，颜色配置，UI框架（比如MUI或者pure.css）；第二级是组件层，项目中出现两次及以上的样式单独抽离

为什么组件化？

分层设计，代码复用，减少冗余；

维护方便，弹性好；

如何组件化？

目前代码分成三级：

第一级粒度最细，是基础，主要包含字体配置，颜色配置，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；

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

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com