【轉(zhuǎn)】理解CSS模塊化

Pines_Cheng 發(fā)布于2019-08-29 11:25 / 2870人閱讀

摘要：但是最終，我們會(huì)為模塊化帶來的好處而開心模塊將作用域限制于組件中，從而避免了全局作用域的問題。但這是因?yàn)槟K將樣式和組件相綁定，從而不會(huì)發(fā)生全局樣式的沖突。先從版本的模塊化開始。我認(rèn)為模塊化背后的思想是正確的。

原文鏈接： https://www.sitepoint.com/und...

在瞬息萬變的前端開發(fā)世界中，很難找到一個(gè)真正有意義的概念，并且將其清晰明了的向廣大人民群眾普及。

把目光投向CSS，一個(gè)重大轉(zhuǎn)折就是CSS預(yù)處理器的出現(xiàn)（在工具方面來看），其中， Sass應(yīng)該是最為著名的一個(gè)。此外，還有 PostCSS，它和Sass略有不同，但是殊途同歸——都是用瀏覽器不能解析的語法編寫，并且最終編譯成瀏覽器能夠理解的語法。

現(xiàn)在，又有一位新的成員出現(xiàn)了，它就是CSS模塊。本文就將介紹CSS模塊化的諸多優(yōu)點(diǎn)，以及如何編寫模塊化的CSS。

什么是CSS模塊
首先，讓我們從官方文檔入手：

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. CSS模塊就是所有的類名都只有局部作用域的CSS文件。

事實(shí)稍微有一些復(fù)雜。由于類名需要默認(rèn)具有局部作用域，這就涉及到一些初始設(shè)置、一個(gè)編譯過程，以及其他一些難以琢磨的東西。

但是最終，我們會(huì)為CSS模塊化帶來的好處而開心：CCS模塊將作用域限制于組件中，從而避免了全局作用域的問題。我們?cè)僖膊挥貌傩臑榻M件尋找一個(gè)好的命名了，因?yàn)榫幾g過程已經(jīng)幫你完成了這個(gè)任務(wù)。

它是如何工作的
CSS模塊需要在構(gòu)建步驟進(jìn)行管道化，這也就是說，它不是自動(dòng)驅(qū)動(dòng)的。它可以看成是webpack 或 Browserify的一個(gè)插件。其基本工作方式是：當(dāng)你在一個(gè)JavaScript模塊中導(dǎo)入一個(gè)CSS文件時(shí)（例如，在一個(gè) React 組件中），CSS模塊將會(huì)定義一個(gè)對(duì)象，將文件中類的名字動(dòng)態(tài)的映射為JavaScript作用域中可以使用的字符串。舉個(gè)具體的例子：

如下是一個(gè)簡單的CSS文件。其中，.base類名不需要是工程中唯一的，因?yàn)樗鼘⒉粫?huì)是真正被解析的類名。它可以看成是在JavaScript模塊中使用的類在樣式表中的別名。

.base {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}

下面是該CSS類在JavaScript組件中的使用方式：

import styles from "./styles.css";

element.innerHTML = `
  CSS Modules are fun.
`;

最終，它將生成下面這個(gè)東西（當(dāng)使用webpack的默認(rèn)步驟時(shí)）：

`CSS Modules are fun.`
._20WEds96_Ee1ra54-24ePy {
  color: deeppink;
  max-width: 42em;
  margin: 0 auto;
}

當(dāng)然，生成的類名可以通過配置，使得它的長度更短或者遵循一些特定的模式。當(dāng)然了，這些最終都不重要（雖然短的類名意味著更短的樣式表），重點(diǎn)在于這些類名是動(dòng)態(tài)生成的、唯一的且和正確的樣式表一一對(duì)應(yīng)的。

一些需要注意的地方
這就是CSS模塊工作的方式了。這時(shí)，你可能會(huì)想，“這到底是個(gè)什么玩意兒，我甚至。。。”。OK，停下！我知道你想說什么。現(xiàn)在就讓我一一解答你可能有的疑慮。

這看起來太丑了

確實(shí)如此。但是類名并不要求一定要長的好看對(duì)不對(duì)？只要可以將樣式正確的應(yīng)用于元素就可以了嘛。而CSS模塊化方法完成的非常好，所以我覺得，這不是一個(gè)問題。

這非常難debug啊

由于需要有一個(gè)編譯的步驟，所以直接debug是非常困難的。其實(shí)，像Sass直接debug也是相當(dāng)不容易的，所以我們才有了 sourcemaps。對(duì)于CSS模塊，我們也可以設(shè)置sourcemap。

其實(shí)，我還想說的是，雖然在模塊中，類的名字是自動(dòng)生成而不可預(yù)知的，但是對(duì)于模塊來說，它還是比樣式表更容易debug的。只要你知道當(dāng)前在開發(fā)者工具中查看的樣式屬于哪個(gè)模塊，在相應(yīng)的樣式表中也是很容易定位。

這使得樣式不容易復(fù)用啦！

這句話既對(duì)也不對(duì)。一方面來說，確實(shí)如此。但這是因?yàn)槟K將CSS樣式和組件相綁定，從而不會(huì)發(fā)生全局樣式的沖突。這其實(shí)是一件好事，我相信你也會(huì)同意的對(duì)不對(duì)。

另一方面，要定義全局樣式也是可以的，只要使用:global()就好了。比如，作者需要保留的全局輔助樣式。

:global(.clearfix::after) {
  content: "";
  clear: both;
  display: table;
}

CSS模塊還可以從其他模塊中繼承樣式，這和Sass中的@extend方法其實(shí)是一樣的。它不會(huì)拷貝樣式，只是將選擇器連接到繼承的樣式中。

.base {
  composes: appearance from "../AnoherModule/styles.css";
}

它需要webpack，Browserify或者其他工具！

這和Sass需要將.scss文件編譯成CSS文件，PostCSS需要將樣式表處理成瀏覽器能夠識(shí)別的樣式其實(shí)是一樣的。無論如何，都需要一個(gè)構(gòu)建步驟。

我們究竟為什么要討論這個(gè)東西？

其實(shí)，我甚至不確定CSS模塊在未來到底會(huì)不會(huì)繼續(xù)存在，不過，我確定這是一種編寫樣式的正確方式。試想，在拆分成許多細(xì)小組件的龐大站點(diǎn)中，卻擁有一個(gè)臃腫的全局樣式表，這肯定是不合適的。

CSS統(tǒng)一的名空間使得它既強(qiáng)大又脆弱。而CSS模塊化或者未來延續(xù)這個(gè)思想的其他工具可以在支持樣式復(fù)用的同時(shí)，避免命名沖突，這是一個(gè)雙贏的選擇。

入門
如前面所說的，你需要有webpack或者Browserify來實(shí)現(xiàn)CSS模塊化。

Webpack

先從webpack版本的模塊化開始。在webpack.config.js中，加上如下配置，使得webpack將CSS文件作為CSS模塊來看待：

{
  test: /.css$/,
  loader: "style-loader!css-loader?modules"
}

這時(shí)，它將把樣式注入到頁面中的``元素中。這可能不是我們想要的，使用extract text plugin for webpack，我們可以很方便的抽取出樣式表：

{
  test: /.css$/,
  loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules")
}

對(duì)于webpack，要講的就是這么多了。

Browserify

我只在命令行中用過Browserify，所以我猜使用起來會(huì)更復(fù)雜一些。在package.json文件中，加入 npm script ：

{
  "scripts": {
    "build": "browserify -p [ css-modulesify -o dist/main.css ] -o dist/index.js src/index.js"
  }
}

這條命令告訴Browserify運(yùn)行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選項(xiàng)可以在編譯完成樣式表時(shí)候，繼續(xù)對(duì)它進(jìn)行處理。

總結(jié)
從今天看來，CSS模塊化系統(tǒng)和生態(tài)確實(shí)有些原始了，從Browserify中的配置就能看出來。不過，我確信CSS模塊化將變得更好，并且越來越多的人將意識(shí)到不管對(duì)小項(xiàng)目還是大項(xiàng)目來說，這都是一個(gè)很好的方法。

我認(rèn)為CSS模塊化背后的思想是正確的。當(dāng)然，我不是說這個(gè)庫就是最佳解決方案，但是，它確實(shí)包含了一些CSS應(yīng)該采用的寫法：模塊化、作用域隔離、同時(shí)支持復(fù)用。