CSS组件化思考_html/css_WEB-ITnose

为什么组件化？

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

维护方便，弹性好；

如何组件化？

目前代码分成三级：

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；

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