成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

讓CSS更完美: PostCSS-modules

Barry_Ng / 487人閱讀

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

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

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

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

每一個(gè)有經(jīng)驗(yàn)的開(kāi)發(fā)者都知道 — 每次使用全局命名空間都是留下了一個(gè)產(chǎn)生bug的隱患，因?yàn)楹芸炀涂赡艹霈F(xiàn)類似命名沖突之類的問(wèn)題，再加上其他方面(項(xiàng)目越來(lái)越大等)的影響，代碼越來(lái)越不易維護(hù)。

對(duì)于CSS來(lái)說(shuō)，這意味著有問(wèn)題的布局。CSS特異性和CSS寬泛性之間，一直存在著如史詩(shī)般的對(duì)決。僅僅是因?yàn)槊總€(gè)選擇器都可能會(huì)影響到那些不想被影響的元素，使之產(chǎn)生了沖突。

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

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

解決方法

因?yàn)橛星叭说奶綄?，現(xiàn)在我們有Object-Oriented CSS,?BEM,?SMACSS等等，這些都是非常棒并且非常有用的方法。他們通過(guò)增加前綴的辦法，解決了命名沖突的問(wèn)題。

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

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

.article__title {
  font-size: 24px;
}

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

  &__title {
    font-size: 24px;
  }
}
CSS模塊（CSS Modules）

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

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

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

.title {
  font-weight: 24px;
}

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

.xkpka {
  font-size: 16px;
}

.xkpkb {
  font-size: 24px;
}

被打碎替換的classes將被保存在一個(gè)JSON對(duì)象中：

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

在轉(zhuǎn)換完成后，你可以直接引用這個(gè)JSON對(duì)象到項(xiàng)目中，這樣就可以用之前寫(xiě)過(guò)的class名來(lái)直接使用它了。

import styles from "./post.json";

class Post extends React.Component {
  render() {
    return (
      

        
…

        …
      

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

不光是保留了之前提到的幾種方法的優(yōu)點(diǎn)，還自動(dòng)解決了組件css分離的問(wèn)題。這就是CSS模塊（CSS Modules），聽(tīng)起來(lái)非常不錯(cuò)吧！

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

PostCSS-modules

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

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

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

// 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模版里面用了：

">
  
">Title

  ...

如果你想看看實(shí)際的代碼，我在GitHub給你準(zhǔn)備了個(gè)example。更多的例子可以看PostCSS-modules和CSS Modules

*

輕松編寫(xiě)可維護(hù)的CSS，沒(méi)有臃腫的mixins。長(zhǎng)長(zhǎng)的前綴將成為歷史，歡迎來(lái)到未來(lái)的CSS世界。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115513.html

相關(guān)文章

  • PostCSS真的太好用了！

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

    SKYZACK 評(píng)論0 收藏0

  • 談?wù)凱ostCSS

    摘要：它們有個(gè)統(tǒng)一的名字預(yù)處理器。面對(duì)以上問(wèn)題，預(yù)處理器給出了非?？尚械慕鉀Q方案變量就像其他編程語(yǔ)言一樣，免于多處修改?；氐皆掝}中，之所以會(huì)出現(xiàn)向預(yù)處理器這樣子的解決方案，歸根結(jié)底還是標(biāo)準(zhǔn)發(fā)展的滯后性導(dǎo)致的。 前言 現(xiàn)在的前端，javascript的發(fā)展有目共睹，框架林立。同時(shí)，html也是齊頭并進(jìn)，推出了HTML5標(biāo)準(zhǔn)，并且得到了普及。這樣的發(fā)展卻唯獨(dú)少了一個(gè)角色？ CSS，就是這個(gè)看似不...

    高勝山 評(píng)論0 收藏0

  • 談?wù)凱ostCSS

    摘要：它們有個(gè)統(tǒng)一的名字預(yù)處理器。面對(duì)以上問(wèn)題，預(yù)處理器給出了非?？尚械慕鉀Q方案變量就像其他編程語(yǔ)言一樣，免于多處修改?；氐皆掝}中，之所以會(huì)出現(xiàn)向預(yù)處理器這樣子的解決方案，歸根結(jié)底還是標(biāo)準(zhǔn)發(fā)展的滯后性導(dǎo)致的。 前言 現(xiàn)在的前端，javascript的發(fā)展有目共睹，框架林立。同時(shí)，html也是齊頭并進(jìn)，推出了HTML5標(biāo)準(zhǔn)，并且得到了普及。這樣的發(fā)展卻唯獨(dú)少了一個(gè)角色？ CSS，就是這個(gè)看似不...

    leap_frog 評(píng)論0 收藏0

  • css還可以這么寫(xiě)？

    摘要：如果我們使用的話，就可以這么寫(xiě)我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫(xiě)法去合并一些類。比如會(huì)編譯成可以看到，生成的中并沒(méi)有任何的變化，那這個(gè)做了什么呢其實(shí)在通過(guò)引用的對(duì)象內(nèi)發(fā)生了變化。 作為一個(gè)前端，毫無(wú)疑問(wèn)css肯定是最基礎(chǔ)的一項(xiàng)技能之一。css是一個(gè)標(biāo)記語(yǔ)言，沒(méi)有編程語(yǔ)言的諸多特性，比如變量定義，復(fù)用，嵌套等，所以相應(yīng)的開(kāi)發(fā)效率也受到限制。在追求效率和自動(dòng)化的當(dāng)下...

    kidsamong 評(píng)論0 收藏0

  • css還可以這么寫(xiě)？

    摘要：如果我們使用的話，就可以這么寫(xiě)我們要修改主色，只需要將修改為即可。二讓我們可以用偽類的寫(xiě)法去合并一些類。比如會(huì)編譯成可以看到，生成的中并沒(méi)有任何的變化，那這個(gè)做了什么呢其實(shí)在通過(guò)引用的對(duì)象內(nèi)發(fā)生了變化。 作為一個(gè)前端，毫無(wú)疑問(wèn)css肯定是最基礎(chǔ)的一項(xiàng)技能之一。css是一個(gè)標(biāo)記語(yǔ)言，沒(méi)有編程語(yǔ)言的諸多特性，比如變量定義，復(fù)用，嵌套等，所以相應(yīng)的開(kāi)發(fā)效率也受到限制。在追求效率和自動(dòng)化的當(dāng)下...

    zhiwei 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<