css modules指的是所有的類名和動(dòng)畫(huà)名稱默認(rèn)都有各自作用域的CSS文件，是在構(gòu)建步驟中對(duì)CSS類名和選擇器限定作用域的一種方式（類似于命名空間）。通過(guò)CSS Modules可以保證單個(gè)組件的所有樣式集中在同一個(gè)地方、只應(yīng)用于該組件。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

什么是CSS Modules？

根據(jù)CSS Modules在Gihub上的項(xiàng)目，它被解釋為：

所有的類名和動(dòng)畫(huà)名稱默認(rèn)都有各自的作用域的CSS文件。

所以CSS Modules既不是官方標(biāo)準(zhǔn)，也不是瀏覽器的特性，而是在構(gòu)建步驟（例如使用Webpack或Browserify）中對(duì)CSS類名和選擇器限定作用域的一種方式（類似于命名空間）。

我們還是先看一個(gè)具體的例子來(lái)解釋清楚它到底是什么，以及為什么要使用CSS Modules吧。我們通常給HTML加一個(gè)CSS的類名來(lái)控制它的樣式：

<h1 class="title">An example heading</h1>

CSS樣式像下面這樣：

.title {   background-color: red; }

只要把CSS文件加載到HTML文件中，這里的<h1>標(biāo)簽背景就會(huì)被設(shè)置成紅色。我們不需要對(duì)HTML或CSS做什么特殊的處理，瀏覽器本來(lái)就支持這種最基本的文件類型。

而CSS Modules的使用方式就不一樣了，我們需要把所有的標(biāo)簽寫(xiě)到JS文件里。下面是一個(gè)簡(jiǎn)單的示例：

import styles from "./styles.css";  element.innerHTML =    `<h1 class="${styles.title}">      An example heading    </h1>`;

在JS中你可以通過(guò)類似styles.title的方式訪問(wèn)CSS文件中的.title類。然后在構(gòu)建過(guò)程中，我們的構(gòu)建工具會(huì)搜索我們用import語(yǔ)句載入的名為styles.css的文件，之后把源文件解析成新的HTML和CSS文件，類名會(huì)被特定的格式替換：

HTML

<h1 class="_styles__title_309571057">   An example heading </h1>

CSS

._styles__title_309571057 {   background-color: red; }

類屬型的.title完全被新生成的命名替換掉了，CSS的源文件也不會(huì)被載入。

在使用CSS模塊時(shí)，類名是動(dòng)態(tài)生成的，唯一的，并準(zhǔn)確對(duì)應(yīng)到源文件中的各個(gè)類的樣式。

這也是實(shí)現(xiàn)樣式作用域的原理。它們被限定在特定的模板里。例如我們?cè)赽uttons.js里引入buttons.css文件，并使用.btn的樣式，在其他諸如forms.js里是不會(huì)被.btn影響的，除非它也引入了buttons.css.

可我們是出于什么目的把CSS和HTML文件搞得這么零碎呢？我們?yōu)槭裁匆褂肅SS模塊呢？

為什么要使用CSS Modules？

通過(guò)CSS Modules，我們可以保證單個(gè)組件的所有樣式：

• 集中在同一個(gè)地方

• 只應(yīng)用于該組件

另外，

import buttons from "./buttons.css"; import padding from "./padding.css";  element.innerHTML = `<div class="${buttons.red} ${padding.large}">`;

通過(guò)這樣的方式可以解決CSS全局作用域的問(wèn)題。

你一定經(jīng)歷過(guò)著急著趕工想要盡快寫(xiě)完CSS，而根本沒(méi)有考慮過(guò)你的代碼會(huì)造成什么不良影響吧。

你也一定干過(guò)在某個(gè)樣式文件的結(jié)尾加上隨意命名的亂七八糟的樣式之類吧。

你肯定也見(jiàn)過(guò)那些你不知道有什么效果，甚至到底有沒(méi)有被使用的樣式吧。

你難道不想安全地寫(xiě)出不影響其他樣式的CSS么？擔(dān)心樣式是獨(dú)立或者依賴別的什么東西么？或者可能會(huì)覆蓋別的地方的樣式？

諸如此類的問(wèn)題都足夠讓人頭疼了。而且隨著項(xiàng)目的擴(kuò)張，會(huì)越來(lái)越令人絕望。

但使用CSS Modules就可以避免這些問(wèn)題。除非你在某個(gè)模塊中載入一個(gè)CSS樣式，其他情況下這個(gè)樣式都不會(huì)影響別的HTML.

（學(xué)習(xí)視頻分享：css視頻教程）