讓CSS更完美: PostCSS-modules

Barry_Ng 發(fā)布于2019-08-30 13:22 / 483人閱讀

摘要：起初只是一個美化文檔的工具，但是事情到年發(fā)生了變化。對于來說，這意味著有問題的布局。和朝夕相伴的有和最終確定的。他們通過增加前綴的辦法，解決了命名沖突的問題。長長的前綴將成為歷史，歡迎來到未來的世界。

譯者注（GeoffZhu）: 這篇適合一些使用過預(yù)處理CSS的開發(fā)者，比如less，sass或stylus，如果你都沒用過，那你一定不是個好司機。在PostCSS中早就可以使用CSS Modules了，該篇作者貢獻了一個新工具，可以讓更多開發(fā)者方便的使用最新的CSS Modules。

我們和全局作用域的css斗爭了多年，現(xiàn)在終于是時候結(jié)束它了。不管你用的是什么語言還是框架，CSS命名沖突將不再是個問題。我將給你展示一下PostCSS和PostCSS-modules如何使用，并且可以在服務(wù)端使用它們。
CSS起初只是一個美化文檔的工具，但是事情到1996年發(fā)生了變化。瀏覽器中不再單單只有文檔了，即時通訊，各種軟件，游戲，沒什么是瀏覽器不能承載的。

當(dāng)今，我們在HTML和CSS方面已經(jīng)走了很遠(yuǎn)很遠(yuǎn)，開發(fā)者們激發(fā)出了CSS所有的潛力，甚至創(chuàng)造出了一些CSS本身都快駕馭不了的東西。

每一個有經(jīng)驗的開發(fā)者都知道 — 每次使用全局命名空間都是留下了一個產(chǎn)生bug的隱患，因為很快就可能出現(xiàn)類似命名沖突之類的問題，再加上其他方面(項目越來越大等)的影響，代碼越來越不易維護。

對于CSS來說，這意味著有問題的布局。CSS特異性和CSS寬泛性之間，一直存在著如史詩般的對決。僅僅是因為每個選擇器都可能會影響到那些不想被影響的元素，使之產(chǎn)生了沖突。

基本所有編程語言都支持局部作用域。和CSS朝夕相伴的JavaScript有AMD, CommonJS和最終確定的ES6 modules。但是我們并沒有一個可以模塊化CSS的方法。

對于一個高質(zhì)量項目來說，獨立的UI組件（也就是組件化）非常重要的 — 每個組件小巧獨立，可以拼合成復(fù)雜的頁面，這讓我們節(jié)省了很多的工作。但是我們始終有一個疑問，如何防止全局命名沖突那？

解決方法

因為有前人的探尋，現(xiàn)在我們有Object-Oriented CSS,?BEM,?SMACSS等等，這些都是非常棒并且非常有用的方法。他們通過增加前綴的辦法，解決了命名沖突的問題。

通過增加前綴的辦法解決命名沖突是個體力活（manual mangling）。我們手動的去編寫長長的選擇器。你也可以使用預(yù)編譯的css語言，但是它們并沒有從根本上解決問題（還是體力活）。下面是我們用BEM規(guī)范書寫的一個獨立組件（對于現(xiàn)有的除BEM之外的方法，思想上基本也是這樣）：

/* 普通 CSS */
.article {
  font-size: 16px;
}

.article__title {
  font-size: 24px;
}

/* 使用css預(yù)處理語言 */
.article {
  font-size: 16px;

  &__title {
    font-size: 24px;
  }
}

CSS模塊（CSS Modules）

2015年出現(xiàn)了另外兩種方法的實現(xiàn)。分別是CSS-in-JS?和?CSS Modules。我們將主要談?wù)摵笳摺?/p>

CSS模塊允許你將所有css class自動打碎，這是CSS模塊（CSS Modules）的默認(rèn)設(shè)置。然后生成一個JSON文件（sources map）和原本的class關(guān)聯(lián)：

/* post.css */
.article {
  font-size: 16px;
}

.title {
  font-weight: 24px;
}

上面的post.css將會被轉(zhuǎn)換成類似下面這樣：

.xkpka {
  font-size: 16px;
}

.xkpkb {
  font-size: 24px;
}

被打碎替換的classes將被保存在一個JSON對象中：

`{  "article":  "xkpka",  "title":  "xkpkb"  }  `

在轉(zhuǎn)換完成后，你可以直接引用這個JSON對象到項目中，這樣就可以用之前寫過的class名來直接使用它了。

import styles from "./post.json";

class Post extends React.Component {
  render() {
    return (
      
        …
        …
      
    );
  }
}

更多給力的功能, 可以看看?這篇非常好的文章.

不光是保留了之前提到的幾種方法的優(yōu)點，還自動解決了組件css分離的問題。這就是CSS模塊（CSS Modules），聽起來非常不錯吧！

到這里，我們有遇到了另一個問題：我們現(xiàn)在的CSS Modules相關(guān)工具，只能在客戶端（瀏覽器）使用，把它放到一個非Node.js的服務(wù)端環(huán)境中是十分十分困難的。

PostCSS-modules

為了在服務(wù)端和客戶端都能使用CSS Modules，我寫了個PostCSS-modules，它是一個PostCSS插件，讓你可以在服務(wù)端使用模塊化的CSS，并且服務(wù)端語言可以是Ruby, PHP, Python 或者其他語言。

PostCSS是一個CSS預(yù)處理器，它是用JS實現(xiàn)的。它支持靜態(tài)檢查CSS，支持變量和混入（mixins），能讓你使用現(xiàn)在還未被瀏覽器支持的未來CSS語法，內(nèi)聯(lián)圖像等等。例如使用最為廣泛的Autoprefixer，它只是PostCSS的一個插件。

如果你使用Autoprefixer，其實你早就在用PostCSS了。所以，添加PostCSS-modules到你的項目依賴列表，并不是一件難事。我先給你打個樣（實例），用Gulp?and?EJS，其實你可以用任何語言做類似的事情。

// Gulpfile.js
var gulp         = require("gulp");
var postcss      = require("gulp-postcss");
var cssModules   = require("postcss-modules");
var ejs          = require("gulp-ejs");
var path         = require("path");
var fs           = require("fs");

function getJSONFromCssModules(cssFileName, json) {
  var cssName       = path.basename(cssFileName, ".css");
  var jsonFileName  = path.resolve("./build", cssName + ".json");
  fs.writeFileSync(jsonFileName, JSON.stringify(json));
}

function getClass(module, className) {
  var moduleFileName  = path.resolve("./build", module + ".json");
  var classNames      = fs.readFileSync(moduleFileName).toString();
  return JSON.parse(classNames)[className];
}

gulp.task("css", function() {
  return gulp.src("./css/post.css")
    .pipe(postcss([
      cssModules({ getJSON: getJSONFromCssModules }),
    ]))
    .pipe(gulp.dest("./build"));
});

gulp.task("html", ["css"], function() {
  return gulp.src("./html/index.ejs")
    .pipe(ejs({ className: getClass }, { ext: ".html" }))
    .pipe(gulp.dest("./build"));
});

gulp.task("default", ["html"]);

我們只需要執(zhí)行g(shù)ulp任務(wù)，就能得到轉(zhuǎn)換后的CSS文件和JSON文件，然后就可以在EJS模版里面用了：