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

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

什么是CSS Modules？

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

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

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

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

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

CSS樣式像下面這樣：

.title {   background-color: red; }

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

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

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

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

HTML

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

CSS

._styles__title_309571057 {   background-color: red; }

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

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

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

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

為什么要使用CSS Modules？

通過CSS Modules，我們可以保證單個組件的所有樣式：

• 集中在同一個地方

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

另外，

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

通過這樣的方式可以解決CSS全局作用域的問題。

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

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

你肯定也見過那些你不知道有什么效果，甚至到底有沒有被使用的樣式吧。

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

諸如此類的問題都足夠讓人頭疼了。而且隨著項目的擴張，會越來越令人絕望。

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

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