摘要：它們有個(gè)統(tǒng)一的名字預(yù)處理器。面對(duì)以上問題，預(yù)處理器給出了非?？尚械慕鉀Q方案變量就像其他編程語言一樣，免于多處修改。回到話題中，之所以會(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è)看似不起眼的家伙，卻在開發(fā)中發(fā)揮著和js一樣重要的作用。css，是一種樣式腳本，好像和編程語言有著一定的距離，我們可以將之理解為一種描述方法。這似乎導(dǎo)致css被輕視了。不過，css近幾年來正在經(jīng)歷著一次巨變——CSS Module。我記得js的井噴期應(yīng)該可以說是node帶來的，它帶來了Module的概念，使得JS可以被工程化開發(fā)項(xiàng)目。那么，今天的css，也將越來越美好。如果你喜歡我的文章，歡迎評(píng)論，歡迎Star~。歡迎關(guān)注我的github博客

既然作為一篇推廣PostCSS的文章，我們就應(yīng)該先來了解一下這是什么，和我們之前講的CSS Module有啥關(guān)系？此處讓我為你們娓娓道來。

目前，在工程化開發(fā)中，使用最多的應(yīng)該就是Less、Sass和Stylus。首先，還是介紹一下它們吧。它們有個(gè)統(tǒng)一的名字——css預(yù)處理器。何為CSS預(yù)處理器？應(yīng)該就是一種可以將你根據(jù)它的規(guī)則寫出來的格式轉(zhuǎn)成css的東西(還是講的通俗一點(diǎn))。它們的出現(xiàn)可以說是恰逢其時(shí)，解決了css的一些缺憾：

語法不夠強(qiáng)大，不能夠嵌套書寫，不利于模塊化開發(fā)

沒有變量和邏輯上的復(fù)用機(jī)制，導(dǎo)致在css的屬性值中只能使用字面量形式，以及不斷重復(fù)書寫重復(fù)的樣式，導(dǎo)致難以維護(hù)。

面對(duì)以上問題，css預(yù)處理器給出了非?？尚械慕鉀Q方案：

變量：就像其他編程語言一樣，免于多處修改。

Sass：使用「$」對(duì)變量進(jìn)行聲明，變量名和變量值使用冒號(hào)進(jìn)行分割

Less：使用「@」對(duì)變量進(jìn)行聲明

Stylus：中聲明變量沒有任何限定，結(jié)尾的分號(hào)可有可無，但變量名和變量值之間必須要有『等號(hào)』。但需要注意的是，如果用“@”符號(hào)來聲明變量，Stylus會(huì)進(jìn)行編譯，但不會(huì)賦值給變量。就是說，Stylus 不要使用『@』聲明變量。Stylus 調(diào)用變量的方法和Less、Sass完全相同。

作用域：有了變量，就必須得有作用域進(jìn)行管理。就想js一樣，它會(huì)從局部作用域開始往上查找變量。

Sass：它的方式是三者中最差的，不存在全局變量的概念

Less：它的方式和js比較相似，逐級(jí)往上查找變量

Stylus：它的方式和Less比較相似，但是它和Sass一樣更傾向于指令式查找

嵌套：對(duì)于css來說，有嵌套的寫法無疑是完美的，更像是父子層級(jí)之間明確關(guān)系

三者在這處的處理都是一樣的，使用「&」表示父元素

有了這些方案，會(huì)使得我們可以在保證DPY、可維護(hù)性、靈活性的前提下，編寫css樣式。

回到話題中，之所以會(huì)出現(xiàn)向預(yù)處理器這樣子的解決方案，歸根結(jié)底還是css標(biāo)準(zhǔn)發(fā)展的滯后性導(dǎo)致的。同時(shí)，我們也應(yīng)該考慮一下，真的只要預(yù)處理器就夠了嗎？往往在項(xiàng)目過大時(shí)，由于缺乏模塊的概念，全局變量的問題會(huì)持續(xù)困擾著你。每次定義選擇器時(shí)，總是要顧及到其他文件中是否也使用了同樣的命名。畢竟項(xiàng)目是團(tuán)隊(duì)的，而不是個(gè)人的。哪是否有方式可以解決這些問題呢？

對(duì)于css命名沖突的問題，由來已久，可以說我們前端開發(fā)人員，天天在苦思冥想，如何去優(yōu)雅的解決這些問題。css并未像js一樣出現(xiàn)了AMD、CMD和ES6 Module的模塊化方案。

那么，回到問題，如何去解決呢？我們的前人也有提出過不同的方案：

Object-Oriented CSS

BEM

SMACSS

方案可以說是層出不窮，不乏有團(tuán)隊(duì)內(nèi)部的解決方案。但是大多數(shù)都是一個(gè)共同點(diǎn)——為選擇器增加前綴。

這可是一個(gè)體力活，你可能需要手動(dòng)的去編寫長(zhǎng)長(zhǎng)的選擇器，或許你可以使用預(yù)編譯的css語言。但是，它們似乎并為解決本質(zhì)的問題——為何會(huì)造成這種缺憾。我們不妨來看看，使用BEM規(guī)范寫出來的例子：

每次這樣子寫，估計(jì)是個(gè)程序員，都得加班吧，哈哈！

現(xiàn)在的網(wǎng)頁開發(fā)，講究的是組件化的思想，因此，急需要可行的css Module方式來完成網(wǎng)頁組件的開發(fā)。自從2015年開始，國(guó)外就流行了CSS-in-JS(典型的代表，react的styled-components)，還有一種就是CSS Module。

本篇談及后者，需要對(duì)前者進(jìn)行了解的話，自行Google即可

對(duì)于css，大家都知道，它是一門描述類語言，并不存在動(dòng)態(tài)性。那么，要如何去形成module呢。我們可以先來看一個(gè)react使用postcss的例子：

//example.css

.article {
    font-size: 14px;
}
.title {
    font-size: 20px;
}

之后，將這些命名打亂：

.zxcvb{
    font-size: 14px;
}
.zxcva{
    font-size: 20px;
}

將之命名對(duì)應(yīng)的內(nèi)容，放入到JSON文件中去：

{
    "article": "zxcvb",
    "title": "zxcva"
}

之后，在js文件中運(yùn)用：

import style from "style.json";

class Example extends Component{
    render() {
        return (
            

                

            
        )
    }
}

這樣子，就描繪出了一副css module的原型。當(dāng)然，我們不可能每次都需要手動(dòng)去寫這些東西。我們需要自動(dòng)化的插件幫助我們完成這一個(gè)過程。之后，我們應(yīng)該先來了解一下postCSS。

PostCSS是什么？或許，你會(huì)認(rèn)為它是預(yù)處理器、或者后處理器等等。其實(shí)，它什么都不是。它可以理解為一種插件系統(tǒng)。使用它GitHub主頁上的介紹：

PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

你可以在使用預(yù)處理器的情況下使用它，也可以在原生的css中使用它。它都是支持的，并且它具備著一個(gè)龐大的生態(tài)系統(tǒng)，例如你可能常用的Autoprefixer，就是PostCSS的一個(gè)非常受歡迎的插件，被Google, Shopify, Twitter, Bootstrap和CodePen等公司廣泛使用。

當(dāng)然，我們也可以在CodePen中使用它：

這里推薦大家看一下PostCSS的深入系列

接下來，我們來看一下PostCSS的配置：

這里我們使用webpack+postcss+postcss-loader+cssnext+postcss-import的組合。

首先，我們可以通過yarn來安裝這些包：

yarn add --dev webpack extract-text-webpack-plugin css-loader file-loader postcss postcss-loader postcss-cssnext postcss-import

然后，我們配置一下webpack.config.js：

const webpack = require("webpack");
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  context: path.resolve(__dirname, "src"),
  entry: {
    app: "./app.js";
  },
  module: {
    loaders: [
      {
        test: /.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: "css-loader",
              options: { importLoaders: 1 },
            },
            "postcss-loader",
          ],
        }),
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, "dist/assets"),
  },
  plugins: [
    new ExtractTextPlugin("[name].bundle.css"),
  ],
};

然后在根目錄下配置postcss.config.js

module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-cssnext": {
      browsers: ["last 2 versions", "> 5%"],
    },
  },
};

之后，就可以在開發(fā)中使用cssnext的特性了

/* Shared */
@import "shared/colors.css";
@import "shared/typography.css";
/* Components */
@import "components/Article.css";

/* shared/colors.css */
:root {
  --color-black: rgb(0,0,0);
  --color-blue: #32c7ff;
}

/* shared/typography.css */
:root {
  --font-text: "FF DIN", sans-serif;
  --font-weight: 300;
  --line-height: 1.5;
}

/* components/Article.css */
.article {
  font-size: 14px;
  & a {
    color: var(--color-blue);
  }
  & p {
    color: var(--color-black);
    font-family: var(--font-text);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
  }
  @media (width > 600px) {
    max-width: 30em;
  }
}

最后使用webpack進(jìn)行編譯就可以了。

PostCSS，國(guó)內(nèi)還沒有太流行起來，不過相信不久的將來也會(huì)逐漸的熱門，并且國(guó)內(nèi)的資源較少，不過最近新出了一本大漠老師們一起翻譯的書——《深入PostCSS Web設(shè)計(jì)》。有興趣的人也可以去看一下，學(xué)習(xí)一些前言的東西。本篇也只是大概的寫了一下PostCSS的東西，鑒于國(guó)內(nèi)資源較少，所以參考了一下國(guó)外的博文教材，下面會(huì)有鏈接。

如果你對(duì)我寫的有疑問，可以評(píng)論，如我寫的有錯(cuò)誤，歡迎指正。你喜歡我的博客，請(qǐng)給我關(guān)注Star~呦。大家一起總結(jié)一起進(jìn)步。歡迎關(guān)注我的github博客

PostCSS-modules: make CSS great again!

PostCSS Deep Dive: What You Need to Know