/* 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;
}

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

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

Click here to see a live example

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

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

使用 CSS 預處理器擴展 CSS 語法

到目前為止，我們介紹了 CSS 的基本樣式和布局，現(xiàn)在我們再來看下那些幫助 CSS 提升語言本身體驗的工具，先從 CSS 預處理器開始吧。

CSS 預處理器允許你使用不同的語言來定義樣式，最終會幫你轉換為瀏覽器可以解釋的 CSS，這一點在當今瀏覽器對新特性支持緩慢的情況下很有價值。第一個主流的 CSS 預處理器是2006年發(fā)布的 Sass，它提供了一個新的更簡潔的語法（縮進代替大括號，沒有分號等等），同時增加了一些 CSS 缺失的高級特性，像變量、工具方法還有計算。下面我們使用 Sass 變量實現(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

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

sass --watch index.sass index.css

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

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

2009年的時候，Less CSS 預編譯器發(fā)布。它也是 Ruby 寫的，并且提供了類似于 Sass 的功能，關鍵不同點是它的語法設計上更接近 CSS。這意味著任何 CSS 代碼都是合法的 Less 代碼，同樣我們看一個用 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 一樣帶有大括號和分號，沒有 Sass 例子的代碼看起來漂亮。然而，和 CSS 相近的特性反而讓開發(fā)者更容易接受它，在2012年，Less 使用了JavaScript（Node.js）重寫了替換了 Ruby，性能上比 Ruby 編譯更快了，并且很多在工作中使用了 Node.js 的人更容易上手了。

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

lessc index.less index.css

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

汲取了 Less 的經(jīng)驗，Sass 開發(fā)者在2010年發(fā)布了一個新的語法叫 SCSS（與 Less 類似的一個 CSS 超集），同時發(fā)布了 LibSass，一個基于 C++ 擴展的 Ruby 引擎，讓編譯更快并且適配于多種語言。
另外一個 CSS 預處理器是2010年發(fā)布的 Stylus，使用 Node.js 編寫，和 Sass 或者 Less 相比更注重于清晰的語法。通常主流的CSS預編譯器就這三種（Sass，Less，Stylus），他們在功能方面非常相似，所以你不必擔心選擇哪一個會是錯誤的。

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

使用 CSS 后處理器的轉換功能

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

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

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

定義這些不同瀏覽器廠商的前綴屬性是非常煩人的，盡量使用生成工具自動添加廠商前綴。我們可以使用 CSS 預處理器來完成這個功能，例如，我們可以用 SCSS 來實現(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);
}

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

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

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

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

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

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

使用 CSS 設計模式

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

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

OOCSS

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

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

SMACSS

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

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

BEM

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

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

Atomic CSS

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

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

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

CSS in JS

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

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

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

五花八門的設計模式很容易讓你不知所措，最重要的記住一點——沒有銀彈。

結論

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

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

英文：Modern CSS Explained For Dinosaurs