在PostCSS官網(wǎng)有著這樣的對(duì)PostCSS特性介紹稽坤，箭頭后面是對(duì)應(yīng)功能的插件及其github地址。
- increase code readability → Autoprefixer
- Use tomorrow's CSS ,today! → postcss-cssnext
- The end of global CSS → postcss-modules
- Avoid errors in your CSS → stylelint
- Powerful grid CSS → lost →lost
PostCSS是一款使用插件去轉(zhuǎn)換CSS的工具够话，有許多非常好用的插件蓝翰，例如autoprefixer,cssnext以及CSS Modules。而上面列舉出的這些特性女嘲，都是由對(duì)應(yīng)的postcss插件去實(shí)現(xiàn)的畜份。而使用PostCSS則需要與webpack或者parcel結(jié)合起來。
在Parcel中使用PostCSS的方法：添加配置文件.postcssrc(JSON),.postcssrc.js或者是postcss.config.js欣尼。
拿 .postcssrc 文件來舉例：
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true
}
}
}
Plugins 在 plugins 對(duì)象中被指定為 key爆雹，并使用對(duì)象的值定義選項(xiàng)。如果插件沒有選項(xiàng)愕鼓，只需將其設(shè)置為 true 即可钙态。
下面我將對(duì)根據(jù)官方readme的演示demo，對(duì)各個(gè)插件進(jìn)行一一介紹菇晃，并添加一些隱藏在插件背后的知識(shí)點(diǎn)的說明驯绎。
1.什么是Autoprefixer？
首先明確一點(diǎn)Autoprefixer是一個(gè)根據(jù)can i use解析css并且為其添加瀏覽器廠商前綴的PostCSS插件谋旦。
不加任何vender prefix的通常寫法剩失。
::placeholder {
color: gray;
}
Autoprefixer將使用基于當(dāng)前瀏覽器支持的特性和屬性數(shù)據(jù)去為你添加前綴屈尼。你可以嘗試下Autoprefixer的demo：http://autoprefixer.github.io/
由上圖可以看出，像沒有瀏覽器差異已經(jīng)完全符合W3C標(biāo)準(zhǔn)的css2.1屬性display拴孤，position等脾歧，Autoprefixer不會(huì)為其加前綴，而像css3屬性transform就會(huì)為其加前綴演熟，其中--webkit是chrome和safari前綴鞭执，--ms則是ie的前綴，像firefox由于已經(jīng)實(shí)現(xiàn)了對(duì)transform的W3C標(biāo)準(zhǔn)化芒粹，因此使用transform即可兄纺。
因此Autoprefixer是一個(gè)非常有用的加速前端開發(fā)的一個(gè)工具，但是它需要基于PostCSS去發(fā)揮作用化漆。
如果對(duì)vender prefix存疑估脆，可以去看我的這篇博客：rem / Vender Prefix / CSS extensions
2.什么是postcss-cssnext？
postcss-cssnext語(yǔ)法input：
: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;
}
瀏覽器可用語(yǔ)法output:
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()進(jìn)行css屬性值的計(jì)算朦拖，也有@apply這樣的應(yīng)用大段規(guī)則的寫法圃阳，也可以借此去了解一些新的css草案特性；不好用的地方在于有一定的學(xué)習(xí)成本璧帝，而且在前期與webpack捍岳，gulp以及parcel進(jìn)行結(jié)合時(shí)也需要花費(fèi)一定時(shí)間，并且如果有新的前端組成員加入睬隶，必須要掌握這種cssnext的語(yǔ)法锣夹。
這樣做有些似乎在嘗試將css變?yōu)橐环N可以進(jìn)行邏輯處理的語(yǔ)言，但是我個(gè)人認(rèn)為這對(duì)于css這樣的靈活的需要具象思維并且需要大量調(diào)試的語(yǔ)言來說理疙，工作中使用cssnext不是一個(gè)很好的選擇晕城，但是工作之余可以作為一個(gè)學(xué)習(xí)新的css草案特性的一個(gè)入口，待到納入標(biāo)準(zhǔn)再去使用窖贤。
剛開始對(duì)自己的想法不確定砖顷，因此去看了下前輩們的想法，其中顧鐵靈對(duì)cssnext的想法與我的想法如出一轍：
CSS 的轉(zhuǎn)譯器（transpiler）赃梧，根據(jù)目前仍處于草案階段滤蝠、未被瀏覽器實(shí)現(xiàn)的標(biāo)準(zhǔn)把代碼轉(zhuǎn)譯成符合目前瀏覽器實(shí)現(xiàn)的 CSS。類似 ES6 的 Babel授嘀。
相比之下物咳，Autoprefixer 更加具有實(shí)用價(jià)值，而 cssnext 實(shí)現(xiàn)的功能以后瀏覽器會(huì)怎么實(shí)現(xiàn)還存疑蹄皱，感覺只能玩玩览闰。
3.什么是postcss-modules芯肤？
在看postcss-modules之前，首先要明確的是CSS Modules的這個(gè)概念压鉴，關(guān)于CSS Modules崖咨，可以閱讀我翻譯的一篇文章：【譯】什么是CSS Modules ？我們?yōu)槭裁葱枰麄儯?/a>
postcss-modules則是CSS Modules在PostCSS上的實(shí)現(xiàn)插件油吭，這里有一篇插件作者本人寫的介紹postcss-modules的文章：PostCSS-modules:make CSS great again!击蹲。
在我有限的開發(fā)經(jīng)驗(yàn)中，只在react中使用過css modules婉宰，在vue和angularjs中都沒用到過歌豺，而且在react中使用時(shí)，不會(huì)去用postcss-modules這個(gè)插件心包，而是使用react-css-modules這個(gè)CSS Modules思想在react中的插件类咧。
下面將給出最簡(jiǎn)單的入門例子：
在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>;
}
}
最后渲染出的組件的標(biāo)簽會(huì)是如下形式：
<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>
如果對(duì)為什么會(huì)把class名編譯成table__table___32osj這樣的形式存在疑惑谴咸，需要先把css modules搞清楚：【譯】什么是CSS Modules 轮听？我們?yōu)槭裁葱枰麄儯?/a>
如果需要在開發(fā)環(huán)境或者生產(chǎn)環(huán)境結(jié)合webpack去使用骗露，那么可以閱讀react-css-modules的官方文檔尋找答案岭佳。
通過這次探索我們可以發(fā)現(xiàn)，前端開發(fā)在不同的生態(tài)萧锉，或者說框架體系下珊随，同一個(gè)技術(shù)，例如CSS Modules這種將思想柿隙，會(huì)有對(duì)應(yīng)的實(shí)現(xiàn)方式叶洞，而我們要掌握的，不僅僅是在某種框架下配置使用的方法禀崖，而是這種開發(fā)思想衩辟。因?yàn)閷W(xué)習(xí)的核心在于學(xué)習(xí)知識(shí)，而不是無休止的學(xué)習(xí)工具波附。
4.什么是stylelint艺晴？
這是用來強(qiáng)制開發(fā)人員按照?qǐng)F(tuán)隊(duì)css規(guī)范寫css樣式的工具，類似eslint掸屡。
若想使用封寞，只需要去啟用規(guī)則即可。
節(jié)選一段stylelint作者博文中的話：
沒錯(cuò)仅财，你的團(tuán)隊(duì)可能在某個(gè)地方的某條純文本wiki中記錄了團(tuán)隊(duì)的代碼樣式規(guī)范狈究。但是，不容忽視的是人的因素：人總是會(huì)犯錯(cuò)——總是在無意之間盏求。
而且即使你很自律地執(zhí)著遵循某個(gè)規(guī)范的代碼風(fēng)格抖锥，但是你沒辦法確保你的同事或是你的開源項(xiàng)目的貢獻(xiàn)者能夠像你一樣亿眠。沒有l(wèi)inter的幫助，你必須人工檢查代碼樣式和錯(cuò)誤磅废。而機(jī)器存在的意義就是代替人來完成能夠自動(dòng)化實(shí)現(xiàn)的任務(wù)缕探。linter就是這樣的機(jī)器，有了linter还蹲，你不需要浪費(fèi)時(shí)間檢查代碼風(fēng)格爹耗，也不需要對(duì)每一個(gè)代碼錯(cuò)誤都寫一大堆的注釋，因此它能夠極大程度地減少你花費(fèi)在代碼審閱上的時(shí)間谜喊。你無須檢查代碼究竟做了些什么潭兽，也無需關(guān)心它看起來什么樣。
事實(shí)與stylelint作者說的是一樣的斗遏，即使團(tuán)隊(duì)有前端開發(fā)規(guī)范山卦，也會(huì)不經(jīng)意間寫出不符合規(guī)范的代碼，因?yàn)槊看螌慶ss規(guī)則前都去規(guī)范check一遍不是誰(shuí)都能做到的诵次，如果團(tuán)隊(duì)再?zèng)]有code review這一關(guān)的話账蓉，寫出各種各樣風(fēng)格的css代碼就是一件必然的事了，短期沒有什么影響逾一，當(dāng)項(xiàng)目變得龐大起來铸本，增加新功能或者重寫舊功能將會(huì)是一件很痛苦的事。
我們主要去關(guān)注Rules部分：
sytlelint的規(guī)則主要有3類遵堵，我將從每一類規(guī)則中挑一個(gè)拿出來作為示例箱玷。
Possible errors(常見的錯(cuò)誤寫法，強(qiáng)烈推薦開啟)
Limit language features(棄用一些正確的寫法陌宿，中等推薦開啟)
Stylistic issues(代碼風(fēng)格代碼統(tǒng)一锡足，普通建議開啟)
Possible errors ------ color-no-invalid-hex: 禁止無效的十六進(jìn)制顏色
完全形式的十六進(jìn)制顏色可以是6或者8（7，8位是透明度的值）個(gè)字符壳坪。同樣他們的縮寫可以是3或者4個(gè)字符舶得。
options : true
下面的代碼違反規(guī)則：
a { color: #00; }
a { color: #fff1az; }
a { color: #12345aa; }
下面的代碼符合規(guī)則:
a { color: #000; }
a { color: #000f; }
a { color: #fff1a0; }
a { color: #123450aa; }
- Limit language features ------ color-no-hex:禁止使用十六進(jìn)制顏色
options : true
十六進(jìn)制的顏色違反規(guī)則：
a { color: #000; }
a { color: #fff1aa; }
a { color: #123456aa; }
無效的十六進(jìn)制色同樣違規(guī)：
a { color: #foobar; }
a { color: #0000000000000000; }
下面的是符合規(guī)則的：
a { color: black; }
a { color: rgb(0, 0, 0); }
a { color: rgba(0, 0, 0, 1); }
- Stylistic issues ------ color-hex-case: 自動(dòng)將十六進(jìn)制色轉(zhuǎn)換為大寫或者小寫
Options string: "lower"|"upper"
可以使用stylelint "foo/*.css" --fix實(shí)現(xiàn)同樣的功能。
"小寫"
下面的代碼是違規(guī)的:
a { color: #FFF; }
下面的是符合規(guī)則的：
a { color: #000; }
a { color: #fff; }
"大寫"
下面的代碼是違規(guī)的:
a { color: #fff; }
下面的是符合規(guī)則的：
a { color: #000; }
a { color: #FFF; }
更多的stylelint的規(guī)則可以查閱：https://github.com/stylelint/stylelint/blob/master/docs/user-guide/rules.md#possible-errors
5.什么是LostGrid爽蝴？
Lost Grid是一個(gè)強(qiáng)大的PostCSS網(wǎng)格系統(tǒng)沐批，可與任何預(yù)處理器甚至是原生CSS一起使用。
在這里有非常好的demo展示：http://lostgrid.org/lostgrid-example.html
節(jié)選2個(gè)展示進(jìn)行說明霜瘪。
.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時(shí)：
小于900px時(shí)：
.NestingSection__grid {
background: #8eb19d;
}
.NestingSection__grid div {
background: #7ba48d;
lost-column: 1/3;
}
.NestingSection__grid div div {
background: #68977c;
lost-column: 1/2;
}
經(jīng)過查看css樣式我們發(fā)現(xiàn)珠插，其實(shí)就是巧用了table布局，before/after偽元素颖对，以及css選擇器捻撑，以及border-box布局，但其實(shí)最最核心的地方還是在于很好的使用了css本身具有的流式布局以及BFC，針對(duì)各種情況顾患，在插件內(nèi)部使用了大量的樣式進(jìn)行約束番捂。
在css3的flex布局和grid布局逐漸被瀏覽器所支持的今天，我個(gè)人建議不使用LostGrid插件江解。
期待和大家交流设预，共同進(jìn)步，歡迎大家加入我創(chuàng)建的與前端開發(fā)密切相關(guān)的技術(shù)討論小組：
- SegmentFault技術(shù)圈:ES新規(guī)范語(yǔ)法糖
- SegmentFault專欄：趁你還年輕犁河，做個(gè)優(yōu)秀的前端工程師
- 知乎專欄：趁你還年輕鳖枕，做個(gè)優(yōu)秀的前端工程師
- Github博客: 趁你還年輕233的個(gè)人博客
- 前端開發(fā)交流群：660634678
努力成為優(yōu)秀前端工程師！
期待和大家交流桨螺，共同進(jìn)步宾符，歡迎大家加入我創(chuàng)建的與前端開發(fā)密切相關(guān)的技術(shù)討論小組：
- SegmentFault技術(shù)圈:ES新規(guī)范語(yǔ)法糖
- SegmentFault專欄：趁你還年輕，做個(gè)優(yōu)秀的前端工程師
- 知乎專欄：趁你還年輕灭翔，做個(gè)優(yōu)秀的前端工程師
- Github博客: 趁你還年輕233的個(gè)人博客
- 前端開發(fā)QQ群：660634678
微信公眾號(hào)： 人獸鬼 / excellent_developers
努力成為優(yōu)秀前端工程師魏烫！
