初探CSS Modules

CSS Modules 介绍

通过其官方的解释我们可以了解到，CSS Modules既不是官方标准，也不是浏览器标准，而是在构建步骤中对css 类名选择器做作用域限定的一种方式(通过hash实现类似命名空间的方法)

CSS模块化

CSS全局作用域问题

CSS规则都是全局的，任何一个组件的样式规则，对整个页面是有效的，随着项目规模和复杂度的提高，很容易出现样式冲突的问题，一旦出现样式冲突，问题的排查也会很麻烦。我们为了避免样式冲突问题通常会通过下面这几种方法来避免

• class命名复杂一点，减少重复概率
• 加父元素选择器，限制选择器class作用范围
• 遵循BEM命名规范

以上方法虽然能够一定程度上减少全局样式冲突的概率，但是并没有从根本上解决全局样式冲突的问题，而且实现方式不够优雅，增加了项目的复杂程度和冗余

对CSS模块化的期待

• 面向组件化开发: 处理复杂UI的最佳实践就是将复杂的组件拆分成更小的UI组件，所以需要有一个CSS架构来匹配
• 沙箱化: 如果一个组件的样式会对其他的组件产生不必要或者是意想不到的影响，那么组件的拆分就没有任何作用，CSS全局作用域仍会给项目带来负面的作用
• 开发方便

方案

CSS模块化的方案有很多，主要有三种

CSS命名约定

规范化CSS的模块化解决方案(BEM等)

弊端

• 复杂的命名
• 仍然没有打通CSS和JS之间的选择器和变量

CSS in JS

彻底抛弃 CSS，用 JavaScript 写 CSS 规则，并 内联样式。styled-components 就是其中代表

弊端

• 样式不能复用
• 不能使用CSS预处理器(或者后处理器)

使用JS来管理样式模块

使用JS来编译原生的CSS文件，使其具备模块化的能力，代表是CSS Module

CSS Module还是JS与CSS分离的写法，不会改变开发者的书写习惯，使用CSS Modules可以让组件className控制权转交给JS，我们不会去关心命名冲突污染等问题，同时可以灵活控制生成的命名，样式代码不用修改即可让使用CSS语法的旧项目零成本接入

CSS Modules 能最大化地结合现有 CSS 生态(预处理器/后处理器等)和 JS 模块化能力，几乎零学习成本。只要你使用 Webpack，可以在任何项目中使用。是目前最好的 CSS 模块化解决方案。

使用

CSS Module具体的使用可以参考阮一峰老师的CSS Modules 用法教程

原文地址：https://www.cnblogs.com/changlon/p/9742473.html