讓CSS更完美: PostCSS-modules

Barry_Ng 發布于2019-08-30 13:22 / 476人閱讀

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

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

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

當今，我們在HTML和CSS方面已經走了很遠很遠，開發者們激發出了CSS所有的潛力，甚至創造出了一些CSS本身都快駕馭不了的東西。

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

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

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

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

解決方法

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

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

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

.article__title {
  font-size: 24px;
}

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

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

CSS模塊（CSS Modules）

2015年出現了另外兩種方法的實現。分別是CSS-in-JS?和?CSS Modules。我們將主要談論后者。

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

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

.title {
  font-weight: 24px;
}

上面的post.css將會被轉換成類似下面這樣：

.xkpka {
  font-size: 16px;
}

.xkpkb {
  font-size: 24px;
}

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

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

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

import styles from "./post.json";

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

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

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

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

PostCSS-modules

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

PostCSS是一個CSS預處理器，它是用JS實現的。它支持靜態檢查CSS，支持變量和混入（mixins），能讓你使用現在還未被瀏覽器支持的未來CSS語法，內聯圖像等等。例如使用最為廣泛的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"]);

我們只需要執行gulp任務，就能得到轉換后的CSS文件和JSON文件，然后就可以在EJS模版里面用了：

">
  ">Title
  ...

如果你想看看實際的代碼，我在GitHub給你準備了個example。更多的例子可以看PostCSS-modules和CSS Modules

輕松編寫可維護的CSS，沒有臃腫的mixins。長長的前綴將成為歷史，歡迎來到未來的CSS世界。

云服務器 GPU云服務器如何讓服務器更安全、更輕巧更清晰更出色

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115513.html

PostCSS真的太好用了！

摘要：下面的代碼違反規則下面的代碼符合規則禁止使用十六進制顏色十六進制的顏色違反規則無效的十六進制色同樣違規下面的是符合規則的自動將十六進制色轉換為大寫或者小寫可以使用實現同樣的功能。 showImg(https://segmentfault.com/img/remote/1460000014782565); 在PostCSS官網有著這樣的對PostCSS特性介紹，箭頭后面是對應功能的插件及...

SKYZACK 2019-08-29 15:18 評論0 收藏0
談談PostCSS

摘要：它們有個統一的名字預處理器。面對以上問題，預處理器給出了非常可行的解決方案變量就像其他編程語言一樣，免于多處修改。回到話題中，之所以會出現向預處理器這樣子的解決方案，歸根結底還是標準發展的滯后性導致的。前言現在的前端，javascript的發展有目共睹，框架林立。同時，html也是齊頭并進，推出了HTML5標準，并且得到了普及。這樣的發展卻唯獨少了一個角色？ CSS，就是這個看似不...

高勝山 2019-08-30 13:47 評論0 收藏0
談談PostCSS

摘要：它們有個統一的名字預處理器。面對以上問題，預處理器給出了非常可行的解決方案變量就像其他編程語言一樣，免于多處修改。回到話題中，之所以會出現向預處理器這樣子的解決方案，歸根結底還是標準發展的滯后性導致的。前言現在的前端，javascript的發展有目共睹，框架林立。同時，html也是齊頭并進，推出了HTML5標準，并且得到了普及。這樣的發展卻唯獨少了一個角色？ CSS，就是這個看似不...

leap_frog 2019-08-21 17:05 評論0 收藏0
css還可以這么寫？

摘要：如果我們使用的話，就可以這么寫我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會編譯成可以看到，生成的中并沒有任何的變化，那這個做了什么呢其實在通過引用的對象內發生了變化。作為一個前端，毫無疑問css肯定是最基礎的一項技能之一。css是一個標記語言，沒有編程語言的諸多特性，比如變量定義，復用，嵌套等，所以相應的開發效率也受到限制。在追求效率和自動化的當下...

kidsamong 2019-08-29 16:35 評論0 收藏0
css還可以這么寫？

摘要：如果我們使用的話，就可以這么寫我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫法去合并一些類。比如會編譯成可以看到，生成的中并沒有任何的變化，那這個做了什么呢其實在通過引用的對象內發生了變化。作為一個前端，毫無疑問css肯定是最基礎的一項技能之一。css是一個標記語言，沒有編程語言的諸多特性，比如變量定義，復用，嵌套等，所以相應的開發效率也受到限制。在追求效率和自動化的當下...

zhiwei 2019-08-23 11:36 評論0 收藏0