/* GRID-BASED LAYOUT */
body {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 200px 1fr 150px;
  grid-template-rows: min-content 1fr min-content;
}
header {
  grid-row: 1;
  grid-column: 1 / 4;
}
nav {
  grid-row: 2;
  grid-column: 1 / 2;
  padding: 0 10px;
}
main {
  grid-row: 2;
  grid-column: 2 / 3;
  padding: 0 20px;
}
aside {
  grid-row: 2;
  grid-column: 3 / 4;
  padding: 0 10px;
}
footer {
  grid-row: 3;
  grid-column: 1 / 4;
}

雖然結(jié)果看起來和基于flexbox的布局一樣，但是CSS在很大程度上得到了改進(jìn)，它清晰地表達(dá)出了期望的布局方式。行和列的大小和形狀在body選擇器中定義，每一項(xiàng)item直接通過他們所在行和列的位置定義。

grid-column 這個(gè)屬性你可能覺得不太好理解，它定義了列的起點(diǎn)和終點(diǎn)。這個(gè)地方讓你覺得困惑的可能是明明有3列，卻為什么定義的范圍是1到4，通過下面的圖片你就能理解了：

Click here to see a live example

第一列是從1到2，第二列是從2到3，第三列從3到4，所以頭部的grid-column是從1到4占據(jù)整個(gè)頁面，導(dǎo)航的grid-column是從1到2占據(jù)第一列等等

一旦你習(xí)慣了grid語法，你會(huì)覺得它是一種非常理想的CSS布局方式。唯一缺點(diǎn)就是瀏覽器支持，幸運(yùn)的是過去一年中瀏覽器的支持又得到了進(jìn)一步的提高。作為專為CSS設(shè)計(jì)的第一款真正的布局工具很難描繪它的重要性，從某種意義上來說，由于現(xiàn)有的工具需要太多的hack和變通方式去實(shí)現(xiàn)，因此web設(shè)計(jì)者過去對(duì)于布局的創(chuàng)意上一直很保守，CSS網(wǎng)格的出現(xiàn)有可能會(huì)激發(fā)出一批從未有過的創(chuàng)意布局設(shè)計(jì)——想想還是挺激動(dòng)人心的！

到目前為止，我們介紹了CSS的基本樣式和布局，現(xiàn)在我們?cè)賮砜聪履切椭鶦SS提升語言本身體驗(yàn)的工具，先從CSS預(yù)處理器開始吧。

CSS預(yù)處理器允許你使用不同的語言來定義樣式，最終會(huì)幫你轉(zhuǎn)換為瀏覽器可以解釋的CSS，這一點(diǎn)在當(dāng)今瀏覽器對(duì)新特性支持緩慢的情況下很有價(jià)值。第一個(gè)主流的CSS預(yù)處理器是2006年發(fā)布的Sass，它提供了一個(gè)新的更簡潔的語法（縮進(jìn)代替大括號(hào)，沒有分號(hào)等等），同時(shí)增加了一些CSS缺失的高級(jí)特性，像變量、工具方法還有計(jì)算。下面我們使用Sass變量實(shí)現(xiàn)下前面例子中帶顏色的區(qū)域定義：

$dark-color: #4a4a4a
$light-color: #f9f9f9
$side-color: #eee
body
  color: $dark-color
  
header, footer
  background-color: $dark-color
  color: $light-color
  
main
  background: $light-color
nav, aside
  background: $side-color

注意我們用$定義了可復(fù)用的變量，省略了大括號(hào)和分號(hào)，語法看起來更加清晰了。簡潔的語法讓Sass看起來很棒，但變量這樣的特性出現(xiàn)在當(dāng)時(shí)來說意義更大，這為編寫整潔可維護(hù)的CSS代碼開辟了新的可能性。
使用Sass你需要安裝Ruby(Ruby)，這門語言主要是讓Sass編譯成正常的CSS，同時(shí)你需要安裝Sass gem，之后你就可以通過命令行把你的.sass文件轉(zhuǎn)成.css文件了，我們先看一個(gè)使用命令行的例子：

sass --watch index.sass index.css

這個(gè)命令定期把index.sass中的Sass代碼轉(zhuǎn)為CSS寫入到index.css文件中（--watch參數(shù)設(shè)定后會(huì)實(shí)時(shí)監(jiān)聽.sass文件改動(dòng)并執(zhí)行編譯，非常方便）

這個(gè)過程被稱為構(gòu)建步驟。這在2006年的時(shí)候是非常大的一個(gè)障礙，如果你對(duì)Ruby這樣的編程語言熟悉的話，這個(gè)過程非常簡單。但是當(dāng)時(shí)很多前端開發(fā)者只用HTML和CSS，他們不需要類似這樣的工具。因此，為了使用CSS預(yù)編譯的功能而讓一個(gè)人學(xué)習(xí)整個(gè)生態(tài)系統(tǒng)是很大的一個(gè)要求了。

2009年的時(shí)候，Less CSS預(yù)編譯器發(fā)布。它也是Ruby寫的，并且提供了類似于Sass的功能，關(guān)鍵不同點(diǎn)是它的語法設(shè)計(jì)上更接近CSS。這意味著任何CSS代碼都是合法的Less代碼，同樣我們看一個(gè)用Less語法的例子：

@dark-color: #4a4a4a;
@light-color: #f9f9f9;
@side-color: #eee;
body {
  color: @dark-color;
}
  
header, footer {
  background-color: @dark-color;
  color: @light-color;
}
  
main {
  background: @light-color;
}
nav, aside {
  background: @side-color;
}

語法上幾乎是相同的（變量的定義使用@替代了$），但是Less和CSS一樣帶有大括號(hào)和分號(hào)，沒有Sass例子的代碼看起來漂亮。然而，和CSS相近的特性反而讓開發(fā)者更容易接受它，在2012年，Less使用了JavaScript（Node.js）重寫了替換了Ruby，性能上比Ruby編譯更快了，并且很多在工作中使用了Node.js的人更容易上手了。

把這段代碼轉(zhuǎn)化為標(biāo)準(zhǔn)的CSS，你需要安裝Node.js 和 Less，執(zhí)行的命令行如下：

lessc index.less index.css

這個(gè)命令把index.less文件中的Lessz代碼轉(zhuǎn)化為標(biāo)準(zhǔn)的CSS代碼寫入到index.css文件中，注意lessc命令不能監(jiān)聽文件的變化（和sass不一樣），這意味著你需要安裝其他自動(dòng)監(jiān)聽和編譯的組件來實(shí)現(xiàn)該功能，增加了流程的復(fù)雜性。同樣，對(duì)于程序員來說使用命令行的方式并不難，但是對(duì)于其他只想使用CSS預(yù)編譯器的人來說還是個(gè)非常大的障礙。

汲取了Less的經(jīng)驗(yàn)，Sass開發(fā)者在2010年發(fā)布了一個(gè)新的語法叫SCSS（與Less類似的一個(gè)CSS超集），同時(shí)發(fā)布了LibSass，一個(gè)基于C++擴(kuò)展的Ruby引擎，讓編譯更快并且適配于多種語言。
另外一個(gè)CSS預(yù)處理器是2010年發(fā)布的Stylus，使用Node.js編寫，和Sass或者Less相比更注重于清晰的語法。通常主流的CSS預(yù)編譯器就這三種（Sass，Less，Stylus），他們?cè)诠δ芊矫娣浅Ｏ嗨疲阅悴槐負(fù)?dān)心選擇哪一個(gè)會(huì)是錯(cuò)誤的。

然而，有些人認(rèn)為使用CSS預(yù)處理器開始變得越來越?jīng)]必要，因?yàn)闉g覽器最終會(huì)慢慢實(shí)現(xiàn)這些功能（像變量和計(jì)算）。此外，還有一種稱為CSS后處理器的方法，有可能會(huì)讓CSS預(yù)處理器過時(shí)（顯然這存在些爭議），我們?cè)诤竺鏁?huì)詳細(xì)介紹下。

CSS后處理器使用JavaScript分析并轉(zhuǎn)換你的CSS為合法CSS，從這方面來看和CSS預(yù)處理器很相似，你可以認(rèn)為是解決同一個(gè)問題的不同方式。關(guān)鍵的不同點(diǎn)是CSS預(yù)處理器使用特殊的語法來標(biāo)記需要轉(zhuǎn)換的地方，而CSS后處理器可以解析轉(zhuǎn)換標(biāo)準(zhǔn)的CSS，并不需要任何特殊的語法。舉一個(gè)例子來說明下，我們用最初定義的header標(biāo)簽樣式來看一下吧：

h1, h2, h3, h4, h5, h6 {
  **-ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;**
  hyphens: auto;
}

粗體部分的屬性成為廠商前綴，廠商前綴是瀏覽器廠商對(duì)CSS新功能的實(shí)驗(yàn)和測試使用的，在正式實(shí)現(xiàn)前提供給開發(fā)者使用CSS新屬性的一種方式。-ms代表IE瀏覽器，-moz是火狐瀏覽器，-webkit是基于webkit內(nèi)核的瀏覽器。

定義這些不同瀏覽器廠商的前綴屬性是非常煩人的，盡量使用生成工具自動(dòng)添加廠商前綴。我們可以使用CSS預(yù)處理器來完成這個(gè)功能，例如，我們可以用SCSS來實(shí)現(xiàn)：

@mixin hyphens($value) {
  -ms-hyphens: $value;
  -moz-hyphens: $value;
  -webkit-hyphens: $value;
  hyphens: $value;
}
h1, h2, h3, h4, h5, h6 {
  @include hyphens(auto);
}

這個(gè)地方使用了Sass的 mixin 功能，你可以定義一個(gè)CSS代碼塊然后在其他任何地方重用，當(dāng)這個(gè)文件被編譯成標(biāo)準(zhǔn)的CSS的時(shí)候，所有的@include語句都被替換成與之匹配的@mixin中的CSS。總體來說，這個(gè)解決方案也不差，但是你仍然要為每個(gè)需要廠商前綴的的CSS屬性定義一個(gè)mixin，這些mixin的定義將需要不斷的維護(hù)，比如當(dāng)瀏覽器支持了某個(gè)CSS屬性后你就要在你的定義中移除掉該屬性。

比起寫mixin的方式，直接正常寫CSS然后由工具自動(dòng)識(shí)別添加需要廠商前綴的屬性的方式顯然更優(yōu)雅些。CSS后處理器就恰好能完成這樣的功能。比如，如果你使用 PostCSS 和 autoprefixer 插件，你就可以直接寫正常的CSS并不需要指定瀏覽器廠商前綴，剩下的工作全交給后置處理器去處理：

h1, h2, h3, h4, h5, h6 {
  hyphens: auto;
}

當(dāng)你使用CSS后處理器運(yùn)行這段代碼的時(shí)候hyphens: auto; 將被替換成包含所有瀏覽器廠商前綴的屬性，這意味著你可以正常寫CSS不用擔(dān)心各種瀏覽器兼容性問題，豈不是很棒！
除了PostCSS的autoprefixer插件還有很多有意思的插件，cssnext 插件可以讓你體驗(yàn)下一些實(shí)驗(yàn)性質(zhì)的CSS新功能，CSS modules 可以自動(dòng)改變class的名字避免名稱沖突，stylelint 能檢查出你CSS代碼中一些定義錯(cuò)誤和不符合規(guī)范的寫法。這些工具在過去一兩年里開始流行起來，給開發(fā)者提供了從未有過的工程化流程。

然而，進(jìn)程的發(fā)展總是有代價(jià)的，安裝和使用CSS后處理比CSS預(yù)處理器更復(fù)雜。你不僅要安裝、執(zhí)行命令行，還需要安裝配置各個(gè)插件并且定義好各種復(fù)雜的規(guī)則（比如你的目標(biāo)瀏覽器等）。很多開發(fā)者不再直接使用命令行運(yùn)行PostCSS了，而是通過配置一些構(gòu)建系統(tǒng)，像Grunt 、Gulp 、webpack，他們可以幫助你管理前端開發(fā)工作中需要的各種構(gòu)建工具。

值得注意的是對(duì)于CSS后處理器存在些爭議，有人認(rèn)為這個(gè)術(shù)語有些讓人迷惑（一種說法是建議都應(yīng)該叫CSS預(yù)處理器，還有一種說法是應(yīng)該都簡稱CSS處理器，等等），有人認(rèn)為有了CSS后處理器完全可以不需要CSS預(yù)處理器，有人則主張兩者一起使用。不管怎么說，去了解下CSS后處理器的使用還是非常值得的。

CSS預(yù)處理器和CSS后處理器讓CSS開發(fā)體驗(yàn)有了巨大的提升，但是單靠這些工具還不足以解決維護(hù)大型項(xiàng)目CSS代碼的問題。為了解決這個(gè)問題，人們編寫了一些關(guān)于如何寫CSS的指導(dǎo)方針，通常被稱為CSS規(guī)范。

在我們深入分析CSS規(guī)范前，首先要搞清楚是什么讓CSS隨著時(shí)間推移變得更加難維護(hù)，關(guān)鍵點(diǎn)是CSS是全局性的——你定義的每個(gè)樣式都會(huì)全局應(yīng)用到頁面的每個(gè)部分，用一個(gè)命名約定來保證class名稱的唯一性或者有特殊的規(guī)則來決定指定樣式應(yīng)用到指定元素。CSS規(guī)范提供了一個(gè)有組織性的方式來避免大量代碼時(shí)出現(xiàn)的這些問題，讓我們按照時(shí)間順序來看看主流的一些規(guī)范吧

OOCSS（面向?qū)ο蟮腃SS）是在2009年首次提出的，它是圍繞兩個(gè)原則建立的規(guī)范。第一個(gè)原則是結(jié)構(gòu)和樣式分離，這意味著定義結(jié)構(gòu)（布局）的CSS不應(yīng)該和定義樣式（顏色、字體等）的CSS混雜在一起，這樣我們就可以很簡單的為一個(gè)應(yīng)用定義新的皮膚了；第二個(gè)原則是容器和內(nèi)容分離，把元素看成是一個(gè)可重用的對(duì)象，關(guān)鍵核心點(diǎn)是一個(gè)對(duì)象不管用在頁面的任何位置都應(yīng)該看起來是相同的。

OOCSS提供了成熟的指導(dǎo)規(guī)范，但是對(duì)于具體的執(zhí)行規(guī)范并沒有明確指出。后來出現(xiàn)的SMACSS采用了它的核心概念，并且添加了更多的細(xì)節(jié)，使用起來更簡單了。

SMACSS（可擴(kuò)展模塊化架構(gòu)的CSS）是在2011年出現(xiàn)的一種設(shè)計(jì)模式，它將CSS分為5個(gè)不同的類別——基本規(guī)范、布局規(guī)范、模塊、狀態(tài)規(guī)范和樣式規(guī)范。SMACSS也有一些推薦的命名規(guī)則，對(duì)于布局規(guī)范使用l- 或者layout- 作為前綴；對(duì)于狀態(tài)規(guī)范，使用is-hidden 或者is-collapsed 作為前綴。

相比OOCSS，SMACSS有了更多細(xì)節(jié)上的規(guī)范，但是CSS規(guī)則該劃分為哪一類別的規(guī)范中，這是個(gè)需要仔細(xì)考慮的問題。后來出現(xiàn)的BEM對(duì)這一方面進(jìn)行了改進(jìn)，讓它更易使用了。

BEM (塊, 元素, 修飾符)是在2010年出現(xiàn)的規(guī)范，它的思想主要是圍繞把用戶界面切分成獨(dú)立的塊。塊是一個(gè)可重用的組件（舉個(gè)例子像表單搜索，可以這樣定義

BEM的規(guī)范很容易理解，對(duì)于新手來說命名規(guī)則上也很友好，缺點(diǎn)就是可能會(huì)導(dǎo)致class名字非常長，并且沒有遵循傳統(tǒng)的命名規(guī)范。后來出現(xiàn)的Atomic CSS又把這個(gè)非傳統(tǒng)方式帶到了一個(gè)新的高度。

Atomic CSS (也稱為 功能性CSS)是2014年出現(xiàn)的一個(gè)規(guī)范，它的思想是基于可視化的方法創(chuàng)建小而功能單一化的class。這種規(guī)范與OOCSS、SMACSS和BEM完全相反——它并不是把頁面上的元素看做是可重用的對(duì)象，Atomic CSS忽略掉了這些對(duì)象，每一個(gè)元素使用了可重用的單一功能的class樣式集合。因此像Search 就被替換成這樣的寫法了Search

如果你看到這個(gè)例子第一反應(yīng)是被嚇的退縮了，沒關(guān)系你并不是唯一有這想法的人——很多人認(rèn)為這種方式完全違背了CSS的最佳實(shí)踐，但是，關(guān)于這個(gè)有爭議的規(guī)范在不同場景下的應(yīng)用也產(chǎn)出了一系列精彩的討論。這篇文章很清晰的分析了傳統(tǒng)的分離思想是CSS依賴于HTML創(chuàng)建（即使使用像BEM這類的規(guī)范），而Atomic的方式是HTML依賴于CSS創(chuàng)建，兩者都沒錯(cuò)，但是仔細(xì)想想你會(huì)發(fā)現(xiàn)CSS和HTML徹底分離的想法是實(shí)現(xiàn)不了的。

其他的CSS設(shè)計(jì)模式，像CSS in JS其實(shí)也包含了CSS和HTML相互依賴的思想，這也成為了一個(gè)飽受爭議的設(shè)計(jì)規(guī)范之一。

CSS in JS 是2014年推出的一種設(shè)計(jì)模式，它的核心思想是把CSS直接寫到各自組件中，而不是多帶帶的樣式文件里。這種方式在React框架中引入的，最早是使用內(nèi)聯(lián)樣式，后來又進(jìn)化成了使用JavaScript生成CSS然后插入到頁面的style標(biāo)簽中的方式。

CSS in JS再一次違背了CSS中關(guān)于分離的最佳實(shí)踐，主要原因是web隨著時(shí)間推移發(fā)生了很大的變化。最初web大部分都是靜態(tài)網(wǎng)站——這種情況下HTML內(nèi)容和CSS表現(xiàn)分離是很有意義的，但現(xiàn)在大部分應(yīng)用都是動(dòng)態(tài)web構(gòu)建——這種情況下可重用的組件更加有意義了。

CSS in JS設(shè)計(jì)的目標(biāo)是定義邊界清晰包含自己HTML/CSS/JS的獨(dú)立組件，并且不受其他組件的影響。React是最早采用這種思想的框架，后續(xù)也影響到了其他框架像Angular、Ember和Vue.js。需要注意的是CSS in JS的模式相對(duì)來說比較新的，開發(fā)人員正在不斷的嘗試開發(fā)web應(yīng)用組件時(shí)的一些CSS最佳實(shí)踐。

五花八門的設(shè)計(jì)模式很容易讓你不知所措，最重要的記住一點(diǎn)——沒有銀彈。

簡而言之這就是現(xiàn)代CSS。我們介紹了CSS基本排版樣式，浮動(dòng)布局、flexbox和grid布局，了解了CSS預(yù)處理器為CSS提供的新語法，比如變量和mixins，還了解了CSS后處理器的轉(zhuǎn)換功能，像給CSS添加廠商前綴，并且使用CSS的一些設(shè)計(jì)模式克服了全局CSS的一些問題。在這里我們沒有時(shí)間去挖掘更多CSS其他功能了，CSS覆蓋面太廣了——任何一個(gè)說它簡單的人可能只是對(duì)它一知半解吧！

現(xiàn)代CSS的多變和快速發(fā)展多少讓人感到有些沮喪，但是重要的是要記住web隨著時(shí)間推移進(jìn)化的歷史背景，并且有一群聰明的人愿意為CSS向更好的方向的進(jìn)化去創(chuàng)建一些工具和指導(dǎo)規(guī)范。作為一名開發(fā)者是一件幸運(yùn)的事情，我希望這篇文章提供的信息能作為一個(gè)路線圖幫助你更好的暢行在CSS路程中！