1. 在中大项目编写 CSS 的普遍问题

• 高耦合——改样式的时候，会同时影响其他地方的样式，导致意外的样式问题
• 低复用——重复编写相同的样式，即枯燥乏味又导致 CSS 体积过大，从而影响开发体验与页面加载体验

2.CSS 模块化能解决哪些问题

样式复用、按需加载、局部作用局

3. CSS 模块化解决方案

原理基本：基本上目前所有的解决方案，都是通过控制样式权重、定义全局唯一的样式名称，来达到模块化、控制作用局的效果

3.1 官方方案

大家都知道一个页面中的 CSS 样式的作用范围是全局的，这同时是它的优点与缺点，其样式覆盖规则是根据标签样式继承规则、样式选择器权重、样式定义顺序等来决定最终展示的样式，而 CSS 官方没有给出控制 CSS 作用域的解决方案。

在前端发展的早期，我们写 CSS 的进化过程大致如下：

1. style属性：最原始的时候，直接将样式通过 style 属性的方式写入标签，大量的样式充斥在 HTML 中，导致 HTML 标签与样式难以维护
2. <style>标签：后来,为了保持 HTML 的简洁，将 CSS 统一写在 <style> 标签里，但无法复用样式、无法缓存样式
3. <link>标签：然后,将样式写在 .css 文件中，通过 <link> 标签来引入 .css 文件，但没有解决 CSS 作用域问题
4. @import语法：最后, @import 语法解决了更细粒度的复用问题，可以在一个 .css 文件中通过 @import 引入多个 .css 文件，但加载速度较慢，且仍未解决 CSS 作用域问题

3.2 约定式方案

该类方案主要有这几种：BEM、OOCSS、MCSS、AMCSS、SMACSS、Atomic CSS、ITCSS、SUITCSS

这类方案的基本思想：

• 通过约定来规范CSS的命名，以解决命名冲突问题
• 通过提供或推荐分层设计好的CSS代码，来达到样式复用的目的

典型实现方式：引入实现 Atomic CSS 思想的 Tailwind CSS 框架

3.3 工具式方案

Scoped CSS

原理：通过在编译时给每个样式定义处加上全局唯一的属性选择器，并在样式使用的地方加上同样的属性名，来达到模块化CSS局部作用域的效果
优点：上手简单
缺点：由于属性选择器的权重不够高，导致外部样式依然能够影响其vue组件内样式，因此局部作用域的效果不够彻底
典型实现方式：在 Vue 组件中 <style> 标签上添加 Scoped 属性

CSS Modules

原理：通过在编译时直接将每个样式名替换成全局唯一的名称，来达到模块化 CSS 局部作用域的效果
优点：CSS Modules 能最大化地结合现有 CSS 生态 (预处理器/后处理器等) 和 JS 模块化能力
缺点：与组件库难以配合
典型实现方式：在 Webpack 的 css-loader 中启用 CSS Modules

CSS in JS

原理：与 CSS Modules 相似，通过在编译时直接将每个样式名替换成全局唯一的名称，来达到模块化 CSS 局部作用域的效果
优点：通过将业务相关的 HTML、CSS、JS 代码写在一起，以便后期维护与移植；充分利用 JS 的编程能力来实现复杂的样式动态效果
缺点：需要一些学习成本；代码复杂度增高；不能利用成熟的 CSS 预处理器（或后处理器）；无法方便地使用伪类，媒体查询等
典型实现方式：引入 styled-components 插件