CSS组件化思考

为何组件化？

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

• 维护方便，弹性好；

如何组件化？

目前代码分红三级：

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；

若是你们有更好的方案，欢迎留言交流，共同进步。