（點擊上方公眾號，可快速關注）
原文：Hugo Giraudel
譯文：眾成翻譯
連結：www.zcfy.cc/article/understanding-the-css-modules-methodology-1329.html
在瞬息萬變的前端開發世界中，很難找到一個真正有意義的概念，並且將其清晰明了的向廣大人民群眾普及。
把目光投向CSS，一個重大轉折就是CSS預處理器的出現（在工具方面來看），其中，Sass應該是最為著名的一個。此外，還有 PostCSS，它和Sass略有不同，但是殊途同歸——都是用瀏覽器不能解析的語法編寫，並且最終編譯成瀏覽器能夠理解的語法。
現在，又有一位新的成員出現了，它就是CSS模塊。本文就將介紹CSS模塊化的諸多優點，以及如何編寫模塊化的CSS。
什麼是CSS模塊
首先，讓我們從官方文檔入手：
A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. CSS模塊就是所有的類名都只有局部作用域的CSS文件。
事實稍微有一些複雜。由於類名需要默認具有局部作用域，這就涉及到一些初始設置、一個編譯過程，以及其他一些難以琢磨的東西。
但是最終，我們會為CSS模塊化帶來的好處而開心：CCS模塊將作用域限制於組件中，從而避免了全局作用域的問題。我們再也不用操心為組件尋找一個好的命名了，因為編譯過程已經幫你完成了這個任務。
它是如何工作的
CSS模塊需要在構建步驟進行管道化，這也就是說，它不是自動驅動的。它可以看成是webpack 或 Browserify的一個插件。其基本工作方式是：當你在一個JavaScript模塊中導入一個CSS文件時（例如，在一個 React 組件中），CSS模塊將會定義一個對象，將文件中類的名字動態的映射為JavaScript作用域中可以使用的字符串。舉個具體的例子：
如下是一個簡單的CSS文件。其中，.base類名不需要是工程中唯一的，因為它將不會是真正被解析的類名。它可以看成是在JavaScript模塊中使用的類在樣式表中的別名。
.base {
color: deeppink;
max-width: 42em;
margin: 0 auto;
}
下面是該CSS類在JavaScript組件中的使用方式：
import styles from './styles.css';
element.innerHTML = `<div class="${styles.base}">
CSS Modules are fun.
</div>`;
最終，它將生成下面這個東西（當使用webpack的默認步驟時）：
`<div class="_20WEds96_Ee1ra54-24ePy">CSS Modules are fun.</div>`
._20WEds96_Ee1ra54-24ePy {
color: deeppink;
max-width: 42em;
margin: 0 auto;
}
當然，生成的類名可以通過配置，使得它的長度更短或者遵循一些特定的模式。當然了，這些最終都不重要（雖然短的類名意味著更短的樣式表），重點在於這些類名是動態生成的、唯一的且和正確的樣式表一一對應的。
一些需要注意的地方
這就是CSS模塊工作的方式了。這時，你可能會想，「這到底是個什麼玩意兒，我甚至。。。」。OK，停下！我知道你想說什麼。現在就讓我一一解答你可能有的疑慮。
這看起來太醜了
確實如此。但是類名並不要求一定要長的好看對不對？只要可以將樣式正確的應用於元素就可以了嘛。而CSS模塊化方法完成的非常好，所以我覺得，這不是一個問題。
這非常難debug啊
由於需要有一個編譯的步驟，所以直接debug是非常困難的。其實，像Sass直接debug也是相當不容易的，所以我們才有了 sourcemaps。對於CSS模塊，我們也可以設置sourcemap。
其實，我還想說的是，雖然在模塊中，類的名字是自動生成而不可預知的，但是對於模塊來說，它還是比樣式表更容易debug的。只要你知道當前在開發者工具中查看的樣式屬於哪個模塊，在相應的樣式表中也是很容易定位。
這使得樣式不容易復用啦！
這句話既對也不對。一方面來說，確實如此。但這是因為模塊將CSS樣式和組件相綁定，從而不會發生全局樣式的衝突。這其實是一件好事，我相信你也會同意的對不對。
另一方面，要定義全局樣式也是可以的，只要使用:global()就好了。比如，作者需要保留的全局輔助樣式。
:global(.clearfix::after) {
content: '';
clear: both;
display: table;
}
CSS模塊還可以從其他模塊中繼承樣式，這和Sass中的@extend方法其實是一樣的。它不會拷貝樣式，只是將選擇器連接到繼承的樣式中。
.base {
composes: appearance from '../AnoherModule/styles.css';
}
它需要webpack，Browserify或者其他工具！
這和Sass需要將.scss文件編譯成CSS文件，PostCSS需要將樣式表處理成瀏覽器能夠識別的樣式其實是一樣的。無論如何，都需要一個構建步驟。
我們究竟為什麼要討論這個東西？
其實，我甚至不確定CSS模塊在未來到底會不會繼續存在，不過，我確定這是一種編寫樣式的正確方式。試想，在拆分成許多細小組件的龐大站點中，卻擁有一個臃腫的全局樣式表，這肯定是不合適的。
CSS統一的名空間使得它既強大又脆弱。而CSS模塊化或者未來延續這個思想的其他工具可以在支持樣式復用的同時，避免命名衝突，這是一個雙贏的選擇。
入門
如前面所說的，你需要有webpack或者Browserify來實現CSS模塊化。
Webpack
先從webpack版本的模塊化開始。在webpack.config.js中，加上如下配置，使得webpack將CSS文件作為CSS模塊來看待：
{
test: /\.css$/,
loader: 'style-loader!css-loader?modules'
}
這時，它將把樣式注入到頁面中的元素中。這可能不是我們想要的，使用extract text plugin for webpack，我們可以很方便的抽取出樣式表：
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules')
}
對於webpack，要講的就是這麼多了。
Browserify
我只在命令行中用過Browserify，所以我猜使用起來會更複雜一些。在package.json文件中，加入 npm script ：
{
"scripts": {
"build": "browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js"
}
}
這條命令告訴Browserify運行src/index.js，返回dist/index.js，並且使用 css-modulesify將樣式表編譯至dist/main.css。如果你想再加上Autoprefixer，那麼命令可以寫成這樣：
{
"scripts": {
"build": "browserify -p [ css-modulesify --after autoprefixer -o dist/main.css ] -o dist/index.js src/index.js"
}
}
如你所見，使用--after選項可以在編譯完成樣式表時候，繼續對它進行處理。
總結
從今天看來，CSS模塊化系統和生態確實有些原始了，從Browserify中的配置就能看出來。不過，我確信CSS模塊化將變得更好，並且越來越多的人將意識到不管對小項目還是大項目來說，這都是一個很好的方法。
我認為CSS模塊化背後的思想是正確的。當然，我不是說這個庫就是最佳解決方案，但是，它確實包含了一些CSS應該採用的寫法：模塊化、作用域隔離、同時支持復用。
關注「前端大全」
看更多精選前端技術文章
↓↓↓