在工作中发现前端CSS的使用是多种多样的，比如Sass、Less等预处理语言，还有CSS在中的精彩玩法JS，以及原子CSS解决方案，例如TailWindCSS。有CSSModules，一种专注于解决局部作用域和模块依赖性的纯技术。种类那么多，我们应该怎么选择呢？下面，我将介绍一种在当前微前端趋势下最适合中后端项目使用的方法，以及开发经验的最佳结合。为什么选择CSSModules我们的最佳实践是基于CSSModules，为什么选择他？在实际工作中，我们遇到的最痛苦的问题就是样式的隔离，尤其是在微前端框架中，子应用之间，子应用与主应用之间，甚至同一个项目的不同页面之间。存在样式覆盖，即使各种微前端框架试图解决样式隔离问题，无论是通过工程加命名空间，还是通过shadowDOM，都无法一劳永逸，有其弊端。与Less相比，Sass是一种在每个页面或组件上人为地想一个命名空间的技术。这个过程没有技术限制。仅仅依靠人与人之间的口头规范是没有用的，但CSSModules无疑是一个完整的解决方案。解决风格冲突问题的方法。CSSModules的文档很简单，10分钟就能学会，基本的主流工程工具和脚手架都支持，比如vite默认支持，CRA也自然支持，不需要额外配置。CSSModules开发体验极佳，写CSS从未如此顺畅，后面会详细介绍。CSSModules+LessCSSModules因为很简单，module.css文件还是遵循CSS文件的规范，所以不能嵌套。为了解决这个问题，我们引入了Less，即使用module.less文件格式，这样我们就可以利用Less编写嵌套代码的能力。为什么不是萨斯？其实Sass和Less在本质上并没有太大的区别，也没有好坏之分。之所以选择Less是因为我的项目使用了很多antd的组件库，而antd使用的是Less方案，如果要自定义antd的主题就必须使用Less。有了Less，可以有效弥补CSSModules的很多不足，尤其是嵌套，比如下面的代码。.container{.header{颜色：红色；}}变量的定义和使用Less和CSSModule都支持变量的定义和使用，下面一一看看如何使用：//definecommon.less@width:10px;@height:@width+10px;//使用@import'./common.less';.header{width:@width;height:@height;}//定义colors.css@valueblue:#0c77f8;@valuered:#ff0000;@valuegreen:#aaf200;//使用@valuecolors:"./colors.css";@value蓝色、红色、绿色来自颜色；.title{颜色：红色；background-color:blue;}这两个方法定义和使用都很麻烦，尤其是在使用的时候需要显式导入，我推荐另外一种方法：CSS原生支持的方法。使用文档查看：MDNCSSVariables基本用法如下：//定义全局变量：root{--main-color:#fff;}//定义局部变量。container{--main-color:#000;}//使用变量.component{color:var(--main-color);}，我们可以看到变量有一个明确的--前缀，这样更容易区分，无需导入，使用方便，覆盖方便。如果我们看antd-mobile最新版本的组件库，这个native方法被广泛用于主题定制和样式覆盖。至于兼容性，在中后台场景，Chrome的支持很好，基本不用考虑。Less中的类复用有基于extend和Mixins的继承方式，但我觉得并不比CSSModules的继承方式方便，尤其是Mixins的反常识用法。而且不容易维护，新手也很难理解。CSSModules的composes使用方法如下：//define.container{color:#fff;}//在同一个文件中调用.component{composes:container;}//在不同的文件中调用.component{composes:来自'./index.module.less';color:#000;}如上代码，会被编译成
