PostCSS真的太好用了！

時間  2019-11-08
標籤 postcss 好用 简体版
原文   原文鏈接

image.png

在PostCSS官網有着這樣的對PostCSS特性介紹，箭頭後面是對應功能的插件及其github地址。css

PostCSS是一款使用插件去轉換CSS的工具，有許多很是好用的插件，例如autoprefixer,cssnext以及CSS Modules。而上面列舉出的這些特性，都是由對應的postcss插件去實現的。而使用PostCSS則須要與webpack或者parcel結合起來。
在Parcel中使用PostCSS的方法：添加配置文件.postcssrc(JSON),.postcssrc.js或者是postcss.config.js。
拿 .postcssrc 文件來舉例：html

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

Plugins 在 plugins 對象中被指定爲 key，並使用對象的值定義選項。若是插件沒有選項，只需將其設置爲 true 便可。
下面我將對根據官方readme的演示demo，對各個插件進行一一介紹，並添加一些隱藏在插件背後的知識點的說明。前端

1.什麼是Autoprefixer？

首先明確一點Autoprefixer是一個根據can i use解析css而且爲其添加瀏覽器廠商前綴的PostCSS插件。
不加任何vender prefix的一般寫法。vue

::placeholder {
    color: gray;
}

Autoprefixer將使用基於當前瀏覽器支持的特性和屬性數據去爲你添加前綴。你能夠嘗試下Autoprefixer的demo：http://autoprefixer.github.io/
image
由上圖能夠看出，像沒有瀏覽器差別已經徹底符合W3C標準的css2.1屬性display，position等，Autoprefixer不會爲其加前綴，而像css3屬性transform就會爲其加前綴，其中--webkit是chrome和safari前綴，--ms則是ie的前綴，像firefox因爲已經實現了對transform的W3C標準化，所以使用transform便可。react

所以Autoprefixer是一個很是有用的加速前端開發的一個工具，可是它須要基於PostCSS去發揮做用。webpack

若是對vender prefix存疑，能夠去看個人這篇博客：rem / Vender Prefix / CSS extensionscss3

2.什麼是postcss-cssnext？

postcss-cssnext語法input：git

:root {
  --fontSize: 1rem;
  --mainColor: #12345678;
  --centered: {
      display: flex;
      align-items: center;
      justify-content: center;
  };
}
body {
    color: var(--mainColor);
    font-size: var(--fontSize);
    line-height: calc(var(--fontSize) * 1.5);
    padding: calc((var(--fontSize) / 2) + 1px);
}
.centered {
    @apply --centered;
}

瀏覽器可用語法output:angularjs

body {
    color: rgba(18, 52, 86, 0.47059);
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    padding: calc(0.5rem + 1px);
}
.centered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

粗略看了一遍演示demo，http://cssnext.io/playground/，感受既好用又很差用。
好用的地方在於經過var()和calc()進行css屬性值的計算，也有@apply這樣的應用大段規則的寫法，也能夠藉此去了解一些新的css草案特性；很差用的地方在於有必定的學習成本，並且在前期與webpack，gulp以及parcel進行結合時也須要花費必定時間，而且若是有新的前端組成員加入，必需要掌握這種cssnext的語法。
這樣作有些彷佛在嘗試將css變爲一種能夠進行邏輯處理的語言，可是我我的認爲這對於css這樣的靈活的須要具象思惟而且須要大量調試的語言來講，工做中使用cssnext不是一個很好的選擇，可是工做之餘能夠做爲一個學習新的css草案特性的一個入口，待到歸入標準再去使用。github

剛開始對本身的想法不肯定，所以去看了下前輩們的想法，其中顧鐵靈對cssnext的想法與個人想法一模一樣：

CSS 的轉譯器（transpiler），根據目前仍處於草案階段、未被瀏覽器實現的標準把代碼轉譯成符合目前瀏覽器實現的 CSS。相似 ES6 的 Babel。
相比之下，Autoprefixer 更加具備實用價值，而 cssnext 實現的功能之後瀏覽器會怎麼實現還存疑，感受只能玩玩。

3.什麼是postcss-modules？

在看postcss-modules以前，首先要明確的是CSS Modules的這個概念，關於CSS Modules，能夠閱讀我翻譯的一篇文章：【譯】什麼是CSS Modules ？咱們爲何須要他們？

postcss-modules則是CSS Modules在PostCSS上的實現插件，這裏有一篇插件做者本人寫的介紹postcss-modules的文章：PostCSS-modules:make CSS great again!。

在我有限的開發經驗中，只在react中使用過css modules，在vue和angularjs中都沒用到過，並且在react中使用時，不會去用postcss-modules這個插件，而是使用react-css-modules這個CSS Modules思想在react中的插件。

下面將給出最簡單的入門例子：
在React上下文中，CSS Modules可能像下面這樣寫：

import React from 'react';
import styles from './table.css';

export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
                <div className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;
    }
}

最後渲染出的組件的標籤會是以下形式：

<div class="table__table___32osj">
    <div class="table__row___2w27N">
        <div class="table__cell___1oVw5">A0</div>
        <div class="table__cell___1oVw5">B0</div>
    </div>
</div>

若是對爲何會把class名編譯成table__table___32osj這樣的形式存在疑惑，須要先把css modules搞清楚：【譯】什麼是CSS Modules ？咱們爲何須要他們？

若是須要在開發環境或者生產環境結合webpack去使用，那麼能夠閱讀react-css-modules的官方文檔尋找答案。

經過此次探索咱們能夠發現，前端開發在不一樣的生態，或者說框架體系下，同一個技術，例如CSS Modules這種將思想，會有對應的實現方式，而咱們要掌握的，不只僅是在某種框架下配置使用的方法，而是這種開發思想。由於學習的核心在於學習知識，而不是無休止的學習工具。

4.什麼是stylelint？

這是用來強制開發人員按照團隊css規範寫css樣式的工具，相似eslint。
若想使用，只須要去啓用規則便可。

節選一段stylelint做者博文中的話：

沒錯，你的團隊可能在某個地方的某條純文本wiki中記錄了團隊的代碼樣式規範。可是，不容忽視的是人的因素：人老是會犯錯——老是在無心之間。
並且即便你很自律地執着遵循某個規範的代碼風格，可是你沒辦法確保你的同事或是你的開源項目的貢獻者可以像你同樣。沒有linter的幫助，你必須人工檢查代碼樣式和錯誤。而機器存在的意義就是代替人來完成可以自動化實現的任務。linter就是這樣的機器，有了linter，你不須要浪費時間檢查代碼風格，也不須要對每個代碼錯誤都寫一大堆的註釋，所以它可以極大程度地減小你花費在代碼審閱上的時間。你無須檢查代碼究竟作了些什麼，也無需關心它看起來什麼樣。

事實與stylelint做者說的是同樣的，即便團隊有前端開發規範，也會不經意間寫出不符合規範的代碼，由於每次寫css規則前都去規範check一遍不是誰都能作到的，若是團隊再沒有code review這一關的話，寫出各類各樣風格的css代碼就是一件必然的事了，短時間沒有什麼影響，當項目變得龐大起來，增長新功能或者重寫舊功能將會是一件很痛苦的事。

咱們主要去關注Rules部分：
sytlelint的規則主要有3類，我將從每一類規則中挑一個拿出來做爲示例。

  • Possible errors(常見的錯誤寫法，強烈推薦開啓)
  • Limit language features(棄用一些正確的寫法，中等推薦開啓)
  • Stylistic issues(代碼風格代碼統一，普通建議開啓)
  • Possible errors ------ color-no-invalid-hex: 禁止無效的十六進制顏色

徹底形式的十六進制顏色能夠是6或者8（7，8位是透明度的值）個字符。一樣他們的縮寫能夠是3或者4個字符。
options : true
下面的代碼違反規則：

a { color: #00; }
a { color: #fff1az; }
a { color: #12345aa; }

下面的代碼符合規則:

a { color: #000; }
a { color: #000f; }
a { color: #fff1a0; }
a { color: #123450aa; }
  • Limit language features ------ color-no-hex:禁止使用十六進制顏色

options : true
十六進制的顏色違反規則：

a { color: #000; }
a { color: #fff1aa; }
a { color: #123456aa; }

無效的十六進制色一樣違規：

a { color: #foobar; }
a { color: #0000000000000000; }

下面的是符合規則的：

a { color: black; }
a { color: rgb(0, 0, 0); }
a { color: rgba(0, 0, 0, 1); }
  • Stylistic issues ------ color-hex-case: 自動將十六進制色轉換爲大寫或者小寫

Options string: "lower"|"upper"
可使用stylelint "foo/*.css" --fix實現一樣的功能。
"小寫"
下面的代碼是違規的:

a { color: #FFF; }

下面的是符合規則的：

a { color: #000; }
a { color: #fff; }

"大寫"
下面的代碼是違規的:

a { color: #fff; }

下面的是符合規則的：

a { color: #000; }
a { color: #FFF; }

更多的stylelint的規則能夠查閱：https://github.com/stylelint/...

5.什麼是LostGrid？

Lost Grid是一個強大的PostCSS網格系統，可與任何預處理器甚至是原生CSS一塊兒使用。
在這裏有很是好的demo展現：http://lostgrid.org/lostgrid-...

節選2個展現進行說明。

.ColumnSection__grid div {
    lost-column: 1/1;
}
@media (min-width: 400px) {
    .ColumnSection__grid div {
        lost-column: 1/3;
    }
}
@media (min-width: 900px) {
    .ColumnSection__grid div {
        lost-column: 1/6;
    }
}

大於900px時：
image
小於900px時：
image

.NestingSection__grid {
    background: #8eb19d;
}

.NestingSection__grid div {
    background: #7ba48d;
    lost-column: 1/3;
}
.NestingSection__grid div div {
    background: #68977c;
    lost-column: 1/2;
}

image

通過查看css樣式咱們發現，其實就是巧用了table佈局，before/after僞元素，以及css選擇器，以及border-box佈局，但其實最最核心的地方仍是在於很好的使用了css自己具備的流式佈局以及BFC，針對各類狀況，在插件內部使用了大量的樣式進行約束。
image

在css3的flex佈局和grid佈局逐漸被瀏覽器所支持的今天，我我的建議不使用LostGrid插件。

期待和你們交流，共同進步，歡迎你們加入我建立的與前端開發密切相關的技術討論小組：

努力成爲優秀前端工程師！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程