在postcss官網有著這樣的對postcss特性介紹，箭頭後面是對應功能的外掛程式及其github位址。
postcss是一款使用外掛程式去轉換css的工具，有許多非常好用的外掛程式，例如autoprefixer,cssnext以及css modules。而上面列舉出的這些特性，都是由對應的postcss外掛程式去實現的。而使用postcss則需要與webpack或者parcel結合起來。 在parcel中使用postcss的方法：新增配置檔案.postcssrc(json),.postcssrc.js或者是postcss.config.js。 拿 .postcssrc 檔案來舉例：
}}複製**
首先明確一點autoprefixer是乙個根據can i use解析css並且為其新增瀏覽器廠商字首的postcss外掛程式。 不加任何vender prefix的通常寫法。
::placeholder
複製**
由上圖可以看出，像沒有瀏覽器差異已經完全符合w3c標準的css2.1屬性display，position等，autoprefixer不會為其加字首，而像css3屬性transform就會為其加字首，其中--webkit是chrome和safari字首，--ms則是ie的字首，像firefox由於已經實現了對transform的w3c標準化，因此使用transform即可。
因此autoprefixer是乙個非常有用的加速前端開發的乙個工具，但是它需要基於postcss去發揮作用。
如果對vender prefix存疑，可以去看我的這篇部落格：rem / vender prefix / css extensions
postcss-cssnext語法input：
:root ;
}body
.centered
複製**
body
.centered
複製**
css 的轉譯器（transpiler），根據目前仍處於草案階段、未被瀏覽器實現的標準把**轉譯成符合目前瀏覽器實現的 css。類似 es6 的 babel。 相比之下，autoprefixer 更加具有實用價值，而 cssnext 實現的功能以後瀏覽器會怎麼實現還存疑，感覺只能玩玩。在看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
}複製**
"table__table___32osj">
"table__row___2w27n">
"table__cell___1ovw5">a0
"table__cell___1ovw5">b0
複製**
如果需要在開發環境或者生產環境結合webpack去使用，那麼可以閱讀react-css-modules的官方文件尋找答案。
通過這次探索我們可以發現，前端開發在不同的生態，或者說框架體系下，同乙個技術，例如css modules這種將思想，會有對應的實現方式，而我們要掌握的，不僅僅是在某種框架下配置使用的方法，而是這種開發思想。因為學習的核心在於學習知識，而不是無休止的學習工具。
這是用來強制開發人員按照團隊css規範寫css樣式的工具，類似eslint。 若想使用，只需要去啟用規則即可。
節選一段stylelint作者博文中的話：
沒錯，你的團隊可能在某個地方的某條純文字wiki中記錄了團隊的**樣式規範。但是，不容忽視的是人的因素：人總是會犯錯——總是在無意之間。 而且即使你很自律地執著遵循某個規範的**風格，但是你沒辦法確保你的同事或是你的開源專案的貢獻者能夠像你一樣。沒有linter的幫助，你必須人工檢查**樣式和錯誤。而機器存在的意義就是代替人來完成能夠自動化實現的任務。linter就是這樣的機器，有了linter，你不需要浪費時間檢查**風格，也不需要對每乙個**錯誤都寫一大堆的注釋，因此它能夠極大程度地減少你花費在**審閱上的時間。你無須檢查**究竟做了些什麼，也無需關心它看起來什麼樣。事實與stylelint作者說的是一樣的，即使團隊有前端開發規範，也會不經意間寫出不符合規範的**，因為每次寫css規則前都去規範check一遍不是誰都能做到的，如果團隊再沒有code review這一關的話，寫出各種各樣風格的css**就是一件必然的事了，短期沒有什麼影響，當專案變得龐大起來，增加新功能或者重寫舊功能將會是一件很痛苦的事。
我們主要去關注rules部分： sytlelint的規則主要有3類，我將從每一類規則中挑乙個拿出來作為示例。
a
a a
複製**
a
a a
a 複製**
a
a a
複製**
a
a 複製**
a
a a
複製**
a
複製**
a
a 複製**
a
複製**
a
a 複製**
lost grid是乙個強大的postcss網格系統，可與任何預處理器甚至是原生css一起使用。 在這裡有非常好的demo展示：lostgrid.org/lostgrid-ex…
節選2個展示進行說明。
.columnsection__grid div
@media (min-width: 400px)
}@media (min-width: 900px)
}複製**
小於900px時：
.nestingsection__grid
.nestingsection__grid div
.nestingsection__grid div div
複製**
經過檢視css樣式我們發現，其實就是巧用了table布局，before/after偽元素，以及css選擇器，以及border-box布局，但其實最最核心的地方還是在於很好的使用了css本身具有的流式布局以及bfc，針對各種情況，在外掛程式內部使用了大量的樣式進行約束。
在css3的flex布局和grid布局逐漸被瀏覽器所支援的今天，我個人建議不使用lostgrid外掛程式。
努力成為優秀前端工程師！postcss真的太好用了！
bass真是太好用了
和分類標題一樣,寫的很菜的,請多多包含指點啊 說明 偏移offset處開始,讀取size大小的內容到memorystream中,這是目前bass的版本,老版本沒試過,呵呵 function bas p3 wdf string offset,size longword mem boolean bool...
這些git命令也太好用了叭
總結一波很少人知道但是很好用的git命令 情形一 你已經執行了git add 和git commit m 但是你突然發現你改的一些東西有點問題，但是你又不想放棄修改，這時候可以使用git reset head 情形二 你在乙個分支改東西改到一半，突然另乙個分支的版本出現了特別緊急的問題，只能先放下手...
騰訊爸爸開源抓包利器Nohost，太好用了！
今天給大夥推薦一款開源的抓包利器nohost。nohost 是基於 whistle 實現的多使用者多環境配置及抓包除錯系統，不僅具備 whistle 的所有功能，並在 whistle 基礎上擴充套件了一些功能，且支援多人多環境同時使用，主要用於部署在公共伺服器上供整個部門 公司 的同事共同使用，具有...