CSS新浪潮——Styled Components

編者按：本文由Athon在眾成翻譯平台上翻譯。

CSS很奇怪，你花上15分鐘就可以學會它的基礎，但是需要花費數年才能想到一個好方法來組織你的樣式。

造成上述問題的原因有一部分是語言本身的怪癖。除了盒模型以外，CSS是很局限的：沒有變數、循環或者函數。同時，它又允許你使用元素、類、ID或者它們的組合來改變樣式。

混亂的樣式表

你可能已經親身經歷過，樣式表常常是造成混亂的原因。儘管像SASS、LESS這種預處理語言添加了很多好用的特性，但是他們依舊沒有有效地阻止CSS變混亂。

於是組織代碼的任務就留給了像 BEM這樣的方法，雖然很有效，但是它完全是自選方案，不能被強制應用在語言或者工具層面。

CSS新浪潮

最近幾年，基於JavaScript的新工具正試圖通過改變CSS的書寫方式，從根本上解決這些問題。

Styled Components 就是其中之一，因為既具備創新性同時保留了編碼習慣，它很快吸引了大量的關注。因此如果你正在使用React（如果沒有，看看我的JS學習計劃 和我的 React簡介），你一定要看看這個CSS新方式。

我最近在用它重構我的個人網站，今天我想把我在重構過程中學到的東西在這裡分享一下。

組件，樣式化

關於Styled Components您首先要理解的是——正如它的名字所表示的——樣式化的組件。 你不必再根據類名或HTML元素來為HTML元素或組件寫樣式了：

<h1 className="title">Hello World</h1>nh1.title{n font-size: 1.5em;n color: purple;n}n

相反，你定義具有自己的封裝樣式的樣式化組件（styled components），然後就可以自由地在你的代碼中使用它：

import styled from styled-components;nconst Title = styled.h1`n font-size: 1.5em;n color: purple;n`;n<Title>Hello World</Title>n

這看上去有一些小的差異，而事實上兩者的語法很相似。但它們的關鍵區別在於樣式現在是組件的一部分了。

換句話說，我們正在擺脫 CSS 類名作為組件和其樣式的中間步驟這種情況。

就像styled-components的聯合創始人 Max Stoiber 所說：

「styled-components的最基本思想就是通過移除樣式和組件之間的映射來執行最佳實踐」

減少複雜性

乍一看會感覺這是反直覺的，因為使用CSS而不直接用帶樣式的html元素（還記得 <font>標籤嗎）的重點就是通過引用中介類名來解耦樣式和標記。

但是這種解耦也帶來了很多的複雜性，而且與CSS相比，像JavaScript這樣的「真正」的編程語言可以更好地處理這種複雜性。

用屬性（Prop）代替類名（Class）

為了遵循「去類名」（no-classes）的理念，當需要定義一個組件的行為時，styled-component使用屬性而不是類名。因此不應該用如下方式：

<h1 className="title primary">Hello World</h1> // will be bluenh1.title{n font-size: 1.5em;n color: purple;nn&.primary{n color: blue;n}n}n

你應該這樣寫：

const Title = styled.h1`n font-size: 1.5em;n color: ${props => props.primary ? blue : purple};n`;n<Title primary>Hello World</Title> // will be bluen

就像你看到的， styled-components通過封裝所有CSS和HTML相關的實現細節來讓您的組件更加乾淨。

也就是說，樣式組件的CSS仍然是CSS。這樣的代碼也是完全有效的（儘管平時不這麼用）：

const Title = styled.h1`n font-size: 1.5em;n color: purple;nn &.primary{n color: blue;n }n`;n<Title className="primary">Hello World</Title> // will be bluen

這個特性讓styled-components很容易被接受：當它被懷疑的時候，你同樣可以使用你熟悉的方法去使用它！

注意事項

值得注意的是，styled-components還只是一個年輕的項目，很多新的特性還沒有被完全支持。例如，如果你想從父組件中為子組件添加樣式，你現在需要先使用CSS類名（至少要等到styled-components的v2版本出來才可以實現）。

這裡同樣還沒有在服務端預渲染你的CSS的「官方途徑」，雖然通過手動注入樣式肯定是可以實現的。

並且，styled-component會生成隨機的類名，這會導致很難用瀏覽器調試出你是在哪裡定義的樣式。

但是令人振奮人心的是 styled-components的核心成員意識到了所有這些問題，並且正在努力地逐一修復它們。 第二個版本即將發布，還有點小期待呢！

了解更多

我的目標不是詳細解釋styled-components是如何工作的，而是給您簡單的介紹他的特性，以便您自己決定是否使用它。

如果我已經激發了你的好奇心，你可以通過以下方式了解更多（編者註：點擊文末閱讀原文查看鏈接）：

• Max Stoiber最近在 Smashing Magazine上發表了一篇文章介紹為什麼要使用styled-components。
• styled-components 項目本身就有大量的文檔。
• Jamie Dixon寫的文章 使用styled-components的一些好處。
• 如果你想知道這個庫是如何實現的，看看Max的這篇文章 。

如果你想要了解更多，你還可以看看 Glamor，它是CSS新浪潮的另一種實現方式！