初探CSS Modules

CSS Modules 介绍

---

CSS Modules究竟是个什么东西，不妨先看看其官方解释CSS Modules
经过其官方的解释咱们能够了解到，CSS Modules既不是官方标准，也不是浏览器标准，而是在构建步骤中对css 类名选择器作做用域限定的一种方式(经过hash实现相似命名空间的方法)

CSS模块化

---

JS都已经全面实现的模块化，只有CSS的模块化还处于探索阶段，那麽为何须要作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 用法教程