[Day 25 - Modern CSS] 指定CSS作用域，模组化开发 CSS Modules

要在 React 中撰写 CSS，为元素添加样式，除了 Styled-components，另外还有一种方式就是 CSS Modules。之前我们提过，在写 CSS 的时候，常常可能会因为重复命名，需要去处理冲突，而 CSS Modules 就是被用来解决这个全局作用域问题的一套工具。

CSS Modules

在 Codesandbox 上的 React Template，预设使用了 Create React App 来快速建立 React 专案，里面会包含 webpack，并且设定好 CSS Modules 的环境。这是今天的范例程序码，我们就直接拿 Create React App 来介绍 CSS Modules 的概念。

局部作用域

在 Create React App 里，CSS 会以 档名.module.css 的档名存在，一样可以在档案内建立 CSS 样式表。当我们要指定一个样式到特定元素上时，就以变数形式 import 样式表，在 className 内引用该变数。

举例来说，现在有 App component 和 Test component，并且两个组件各自存在 text 的样式：

app.module.css

.text {
  color: red;
}

test.module.css

.text {
  color: blue;
}

现在用 CSS Modules 的方式将样式指定给元素：

App.js

import style from "./app.module.css";
import Test from "./Test";

export default function App() {
  return (
    <div>
      <h1 className={style.text}>App</h1>
      <Test></Test>
    </div>
  );
}

Test.js

import style from "./test.module.css";

export default function Test() {
  return (
    <div>
      <h1 className={style.text}>Test</h1>
    </div>
  );
}

打开开发人员工具观察一下两个元素的标签，可以看到这两个样式类别分别被转成独特的 ClassName，让彼此不会互相影响，CSS Modules 就是透过这样的方式去解决 CSS 重复命名和全域污染的问题。

全局作用域

那相反的，当有些样式想要共用时，要产生全局类别的话怎麽做？就在 CSS 样式类别的名称之前加上 :global，该样式就会变成全局性，不会被转换成独特的 ClassName。

app.module.css

:global(.text_green) {
  color: green;
}

App.js

import style from "./app.module.css";

export default function App() {
  return (
    <div>
      <h1 className="text_green">App</h1>
    </div>
  );
}

组合 Class

另外 CSS Modules 还提供了可以继承样式类别的功能 — 组合 (Composition)，可以将共同样式拆分出来成独立的类别，利用 composes 继承，基於该类别再多添加其他特别的样式。

app.module.css

.background_gray {
  background-color: gray;
}

.text_yellow {
  composes: background_gray;
  color: yellow;
}

App.js

import style from "./app.module.css";

export default function App() {
  return (
    <div>
      <h1 className={style.text_yellow}>App</h1>
    </div>
  );
}

小结

范例程序码

今天主要讲解了几个 CSS Module 主要的功能，如果你还想了解更多的话，可以到官方文件观看详细内容。目前我们已经具备了能够在 React 建立组件、样式的能力，在接下来最後的几篇文章，就会带大家用 React 来实作一个待办清单，那我们就下章再见罗！

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

参考资料

• CSS Modules Github
• create-react-app：css modules
• CSS Modules 用法教程
• CSS Modules: 模组化 CSS