談談PostCSS

前言

如今的前端，javascript的發展有目共睹，框架林立。同時，html也是齊頭並進，推出了HTML5標準，而且獲得了普及。這樣的發展卻惟獨少了一個角色？

CSS，就是這個看似不起眼的傢伙，卻在開發中發揮着和js同樣重要的做用。css，是一種樣式腳本，好像和編程語言有着必定的距離，咱們能夠將之理解爲一種描述方法。這彷佛致使css被輕視了。不過，css近幾年來正在經歷着一次鉅變——CSS Module。我記得js的井噴期應該能夠說是node帶來的，它帶來了Module的概念，使得JS能夠被工程化開發項目。那麼，今天的css，也將愈來愈美好。若是你喜歡個人文章，歡迎評論，歡迎Star~。歡迎關注個人github博客

正文

既然做爲一篇推廣PostCSS的文章，咱們就應該先來了解一下這是什麼，和咱們以前講的CSS Module有啥關係？此處讓我爲大家娓娓道來。

我想和大家說再見

目前，在工程化開發中，使用最多的應該就是Less、Sass和Stylus。首先，仍是介紹一下它們吧。它們有個統一的名字——css預處理器。何爲CSS預處理器？應該就是一種能夠將你根據它的規則寫出來的格式轉成css的東西(仍是講的通俗一點)。它們的出現能夠說是恰逢其時，解決了css的一些缺憾：

• 語法不夠強大，不可以嵌套書寫，不利於模塊化開發
• 沒有變量和邏輯上的複用機制，致使在css的屬性值中只能使用字面量形式，以及不斷重複書寫重複的樣式，致使難以維護。

面對以上問題，css預處理器給出了很是可行的解決方案：

1. 變量：就像其餘編程語言同樣，免於多處修改。

   • Sass：使用「$」對變量進行聲明，變量名和變量值使用冒號進行分割
   • Less：使用「@」對變量進行聲明
   • Stylus：中聲明變量沒有任何限定，結尾的分號無關緊要，但變量名和變量值之間必需要有『等號』。但須要注意的是，若是用「@」符號來聲明變量，Stylus會進行編譯，但不會賦值給變量。就是說，Stylus 不要使用『@』聲明變量。Stylus 調用變量的方法和Less、Sass徹底相同。

2. 做用域：有了變量，就必須得有做用域進行管理。就想js同樣，它會從局部做用域開始往上查找變量。

   • Sass：它的方式是三者中最差的，不存在全局變量的概念
   • Less：它的方式和js比較類似，逐級往上查找變量
   • Stylus：它的方式和Less比較類似，可是它和Sass同樣更傾向於指令式查找

3. 嵌套：對於css來講，有嵌套的寫法無疑是完美的，更像是父子層級之間明確關係

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

有了這些方案，會使得咱們能夠在保證DPY、可維護性、靈活性的前提下，編寫css樣式。

回到話題中，之因此會出現向預處理器這樣子的解決方案，歸根結底仍是css標準發展的滯後性致使的。同時，咱們也應該考慮一下，真的只要預處理器就夠了嗎？每每在項目過大時，因爲缺少模塊的概念，全局變量的問題會持續困擾着你。每次定義選擇器時，老是要顧及到其餘文件中是否也使用了一樣的命名。畢竟項目是團隊的，而不是我的的。哪是否有方式能夠解決這些問題呢？

前人的方法

對於css命名衝突的問題，由來已久，能夠說咱們前端開發人員，每天在苦思冥想，如何去優雅的解決這些問題。css並未像js同樣出現了AMD、CMD和ES6 Module的模塊化方案。

那麼，回到問題，如何去解決呢？咱們的前人也有提出過不一樣的方案：

1. Object-Oriented CSS
2. BEM
3. SMACSS

方案能夠說是層出不窮，不乏有團隊內部的解決方案。可是大多數都是一個共同點——爲選擇器增長前綴。

這但是一個體力活，你可能須要手動的去編寫長長的選擇器，或許你可使用預編譯的css語言。可是，它們彷佛併爲解決本質的問題——爲什麼會形成這種缺憾。咱們不妨來看看，使用BEM規範寫出來的例子：

<!-- 正確的。元素都位於 'search-form' 模塊內 -->
<!-- 'search-form' 模塊 -->
<form class="search-form">
    <!-- 在 'search-form' 模塊內的 'input' 元素 -->
    <input class="search-form__input" />
    <!-- 在 'search-form' 模塊內的 'button' 元素 -->
    <button class="search-form__button"></button>
</form>

<!-- 不正確的。元素位於 'search-form' 模塊的上下文以外 -->
<!-- 'search-form' 模塊 -->
<form class=""search-block>
</form>

<!-- 在 'search-form' 模塊內的 'input' 元素 -->
<input class="search-form__input"/>

<!-- 在 'search-form' 模塊內的 'button' 元素 -->
<button class="search-form__button"></button>

每次這樣子寫，估計是個程序員，都得加班吧，哈哈！

一種但願

如今的網頁開發，講究的是組件化的思想，所以，急須要可行的css Module方式來完成網頁組件的開發。自從2015年開始，國外就流行了CSS-in-JS(典型的表明，react的styled-components)，還有一種就是CSS Module。

本篇談及後者，須要對前者進行了解的話，自行Google便可

對於css，你們都知道，它是一門描述類語言，並不存在動態性。那麼，要如何去造成module呢。咱們能夠先來看一個react使用postcss的例子：

//example.css

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

以後，將這些命名打亂：

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

將之命名對應的內容，放入到JSON文件中去：

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

以後，在js文件中運用：

import style from 'style.json';

class Example extends Component{
    render() {
        return (
            <div classname={style.article}>
                <div classname={style.title}></div>
            </div>
        )
    }
}

這樣子，就描繪出了一副css module的原型。固然，咱們不可能每次都須要手動去寫這些東西。咱們須要自動化的插件幫助咱們完成這一個過程。以後，咱們應該先來了解一下postCSS。

我須要認識你

PostCSS是什麼？或許，你會認爲它是預處理器、或者後處理器等等。其實，它什麼都不是。它能夠理解爲一種插件系統。使用它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.

你能夠在使用預處理器的狀況下使用它，也能夠在原生的css中使用它。它都是支持的，而且它具有着一個龐大的生態系統，例如你可能經常使用的Autoprefixer，就是PostCSS的一個很是受歡迎的插件，被Google, Shopify, Twitter, Bootstrap和CodePen等公司普遍使用。

固然，咱們也能夠在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%'],
    },
  },
};

以後，就能夠在開發中使用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進行編譯就能夠了。

總結

PostCSS，國內尚未太流行起來，不過相信不久的未來也會逐漸的熱門，而且國內的資源較少，不過最近新出了一本大漠老師們一塊兒翻譯的書——《深刻PostCSS Web設計》。有興趣的人也能夠去看一下，學習一些前言的東西。本篇也只是大概的寫了一下PostCSS的東西，鑑於國內資源較少，因此參考了一下國外的博文教材，下面會有連接。

若是你對我寫的有疑問，能夠評論，如我寫的有錯誤，歡迎指正。你喜歡個人博客，請給我關注Star~呦。你們一塊兒總結一塊兒進步。歡迎關注個人github博客

參考連接

PostCSS-modules: make CSS great again!

PostCSS Deep Dive: What You Need to Know