前言
現(xiàn)在的前端，javascript的發(fā)展有目共睹嫡锌，框架林立巾陕。同時(shí)，html也是齊頭并進(jìn)菠剩，推出了HTML5標(biāo)準(zhǔn)易猫，并且得到了普及。這樣的發(fā)展卻唯獨(dú)少了一個(gè)角色具壮？
CSS准颓，就是這個(gè)看似不起眼的家伙，卻在開(kāi)發(fā)中發(fā)揮著和js一樣重要的作用棺妓。css攘已，是一種樣式腳本，好像和編程語(yǔ)言有著一定的距離怜跑，我們可以將之理解為一種描述方法样勃。這似乎導(dǎo)致css被輕視了吠勘。不過(guò)，css近幾年來(lái)正在經(jīng)歷著一次巨變——CSS Module峡眶。我記得js的井噴期應(yīng)該可以說(shuō)是node帶來(lái)的剧防，它帶來(lái)了Module的概念，使得JS可以被工程化開(kāi)發(fā)項(xiàng)目辫樱。那么峭拘，今天的css，也將越來(lái)越美好狮暑。如果你喜歡我的文章鸡挠，歡迎評(píng)論，歡迎Star~搬男。歡迎關(guān)注我的github博客
正文
既然作為一篇推廣PostCSS的文章宵凌，我們就應(yīng)該先來(lái)了解一下這是什么，和我們之前講的CSS Module有啥關(guān)系止后？此處讓我為你們娓娓道來(lái)瞎惫。
我想和你們說(shuō)再見(jiàn)
目前，在工程化開(kāi)發(fā)中译株，使用最多的應(yīng)該就是Less瓜喇、Sass和Stylus。首先歉糜，還是介紹一下它們吧乘寒。它們有個(gè)統(tǒng)一的名字——css預(yù)處理器。何為CSS預(yù)處理器匪补？應(yīng)該就是一種可以將你根據(jù)它的規(guī)則寫(xiě)出來(lái)的格式轉(zhuǎn)成css的東西(還是講的通俗一點(diǎn))伞辛。它們的出現(xiàn)可以說(shuō)是恰逢其時(shí)，解決了css的一些缺憾：
- 語(yǔ)法不夠強(qiáng)大夯缺，不能夠嵌套書(shū)寫(xiě)蚤氏，不利于模塊化開(kāi)發(fā)
- 沒(méi)有變量和邏輯上的復(fù)用機(jī)制，導(dǎo)致在css的屬性值中只能使用字面量形式踊兜，以及不斷重復(fù)書(shū)寫(xiě)重復(fù)的樣式竿滨，導(dǎo)致難以維護(hù)。
面對(duì)以上問(wèn)題捏境，css預(yù)處理器給出了非秤谟危可行的解決方案：
-
變量：就像其他編程語(yǔ)言一樣，免于多處修改垫言。
- Sass：使用「$」對(duì)變量進(jìn)行聲明贰剥，變量名和變量值使用冒號(hào)進(jìn)行分割
- Less：使用「@」對(duì)變量進(jìn)行聲明
- Stylus：中聲明變量沒(méi)有任何限定，結(jié)尾的分號(hào)可有可無(wú)筷频，但變量名和變量值之間必須要有『等號(hào)』蚌成。但需要注意的是柱告，如果用“@”符號(hào)來(lái)聲明變量，Stylus會(huì)進(jìn)行編譯笑陈，但不會(huì)賦值給變量。就是說(shuō)葵袭，Stylus 不要使用『@』聲明變量涵妥。Stylus 調(diào)用變量的方法和Less、Sass完全相同坡锡。
-
作用域：有了變量蓬网，就必須得有作用域進(jìn)行管理。就想js一樣鹉勒，它會(huì)從局部作用域開(kāi)始往上查找變量帆锋。
- Sass：它的方式是三者中最差的，不存在全局變量的概念
- Less：它的方式和js比較相似禽额，逐級(jí)往上查找變量
- Stylus：它的方式和Less比較相似锯厢，但是它和Sass一樣更傾向于指令式查找
-
嵌套：對(duì)于css來(lái)說(shuō)，有嵌套的寫(xiě)法無(wú)疑是完美的脯倒，更像是父子層級(jí)之間明確關(guān)系
- 三者在這處的處理都是一樣的实辑，使用「&」表示父元素
有了這些方案，會(huì)使得我們可以在保證DPY藻丢、可維護(hù)性剪撬、靈活性的前提下，編寫(xiě)css樣式悠反。
回到話題中残黑，之所以會(huì)出現(xiàn)向預(yù)處理器這樣子的解決方案，歸根結(jié)底還是css標(biāo)準(zhǔn)發(fā)展的滯后性導(dǎo)致的斋否。同時(shí)梨水，我們也應(yīng)該考慮一下，真的只要預(yù)處理器就夠了嗎茵臭？往往在項(xiàng)目過(guò)大時(shí)冰木，由于缺乏模塊的概念，全局變量的問(wèn)題會(huì)持續(xù)困擾著你笼恰。每次定義選擇器時(shí)踊沸，總是要顧及到其他文件中是否也使用了同樣的命名。畢竟項(xiàng)目是團(tuán)隊(duì)的社证，而不是個(gè)人的逼龟。哪是否有方式可以解決這些問(wèn)題呢？
前人的方法
對(duì)于css命名沖突的問(wèn)題追葡，由來(lái)已久腺律，可以說(shuō)我們前端開(kāi)發(fā)人員奕短，天天在苦思冥想，如何去優(yōu)雅的解決這些問(wèn)題匀钧。css并未像js一樣出現(xiàn)了AMD翎碑、CMD和ES6 Module的模塊化方案。
那么之斯，回到問(wèn)題日杈，如何去解決呢？我們的前人也有提出過(guò)不同的方案：
- Object-Oriented CSS
- BEM
- SMACSS
方案可以說(shuō)是層出不窮佑刷，不乏有團(tuán)隊(duì)內(nèi)部的解決方案莉擒。但是大多數(shù)都是一個(gè)共同點(diǎn)——為選擇器增加前綴。
這可是一個(gè)體力活瘫絮，你可能需要手動(dòng)的去編寫(xiě)長(zhǎng)長(zhǎng)的選擇器涨冀，或許你可以使用預(yù)編譯的css語(yǔ)言。但是麦萤，它們似乎并為解決本質(zhì)的問(wèn)題——為何會(huì)造成這種缺憾鹿鳖。我們不妨來(lái)看看，使用BEM規(guī)范寫(xiě)出來(lái)的例子：
<!-- 正確的壮莹。元素都位于 'search-form' 模塊內(nèi) -->
<!-- 'search-form' 模塊 -->
<form class="search-form">
<!-- 在 'search-form' 模塊內(nèi)的 'input' 元素 -->
<input class="search-form__input" />
<!-- 在 'search-form' 模塊內(nèi)的 'button' 元素 -->
<button class="search-form__button"></button>
</form>
<!-- 不正確的栓辜。元素位于 'search-form' 模塊的上下文之外 -->
<!-- 'search-form' 模塊 -->
<form class=""search-block>
</form>
<!-- 在 'search-form' 模塊內(nèi)的 'input' 元素 -->
<input class="search-form__input"/>
<!-- 在 'search-form' 模塊內(nèi)的 'button' 元素 -->
<button class="search-form__button"></button>
每次這樣子寫(xiě)，估計(jì)是個(gè)程序員垛孔，都得加班吧藕甩，哈哈！
一種希望
現(xiàn)在的網(wǎng)頁(yè)開(kāi)發(fā)周荐，講究的是組件化的思想狭莱，因此，急需要可行的css Module方式來(lái)完成網(wǎng)頁(yè)組件的開(kāi)發(fā)概作。自從2015年開(kāi)始腋妙，國(guó)外就流行了CSS-in-JS(典型的代表，react的styled-components)讯榕，還有一種就是CSS Module骤素。
本篇談及后者，需要對(duì)前者進(jìn)行了解的話愚屁，自行Google即可
對(duì)于css济竹，大家都知道，它是一門(mén)描述類(lèi)語(yǔ)言霎槐，并不存在動(dòng)態(tài)性送浊。那么，要如何去形成module呢丘跌。我們可以先來(lái)看一個(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 (
<div classname={style.article}>
<div classname={style.title}></div>
</div>
)
}
}
這樣子耸棒，就描繪出了一副css module的原型荒澡。當(dāng)然，我們不可能每次都需要手動(dòng)去寫(xiě)這些東西与殃。我們需要自動(dòng)化的插件幫助我們完成這一個(gè)過(guò)程单山。之后，我們應(yīng)該先來(lái)了解一下postCSS奈籽。
我需要認(rèn)識(shí)你
PostCSS是什么？或許鸵赫，你會(huì)認(rèn)為它是預(yù)處理器衣屏、或者后處理器等等。其實(shí)辩棒，它什么都不是狼忱。它可以理解為一種插件系統(tǒng)。使用它GitHub主頁(yè)上的介紹：
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的深入系列
接下來(lái)，我們來(lái)看一下PostCSS的配置：
這里我們使用webpack+postcss+postcss-loader+cssnext+postcss-import的組合育八。
首先对途，我們可以通過(guò)yarn來(lái)安裝這些包：
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%'],
},
},
};
之后髓棋，就可以在開(kāi)發(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)行編譯就可以了实檀。
總結(jié)
PostCSS，國(guó)內(nèi)還沒(méi)有太流行起來(lái)按声，不過(guò)相信不久的將來(lái)也會(huì)逐漸的熱門(mén)膳犹，并且國(guó)內(nèi)的資源較少，不過(guò)最近新出了一本大漠老師們一起翻譯的書(shū)——《深入PostCSS Web設(shè)計(jì)》签则。有興趣的人也可以去看一下镣奋，學(xué)習(xí)一些前言的東西。本篇也只是大概的寫(xiě)了一下PostCSS的東西怀愧，鑒于國(guó)內(nèi)資源較少侨颈，所以參考了一下國(guó)外的博文教材余赢，下面會(huì)有鏈接。
如果你對(duì)我寫(xiě)的有疑問(wèn)哈垢，可以評(píng)論妻柒，如我寫(xiě)的有錯(cuò)誤，歡迎指正耘分。你喜歡我的博客举塔，請(qǐng)給我關(guān)注Star~呦。大家一起總結(jié)一起進(jìn)步求泰。歡迎關(guān)注我的github博客
