styled-components 中文文檔翻譯及不徹底指北

前言

官方文檔地址： https://www.styled-components.com/

中文文檔地址：https://github.com/hengg/styled-components-docs-zh

styled-components是一個React的第三方庫，是CSS in JS的優秀實踐。

初次瞭解styled-components是在讀林昊翻譯的React設計模式與最佳實踐一書時。雖然接觸的比較晚，但深深的被它的強大和優雅所吸引。然而其中文資料比較匱乏，爲幫助更多的小夥伴瞭解這個強大的工具，翻譯了部分官方文檔。能力所限，已翻譯部分可能仍有字詞錯誤或語句不通順的地方，歡迎有能力的同窗幫助糾正。

styled-components究竟強在哪裏？這要從它所解決的問題提及：

CSS 的痛點

不能否認，CSS是一門神奇的「語言」（What kind of language is CSS?）。

它易於上手、卻難以精通。它沒有變量、函數等概念致使它的表現力要稍弱於其它語言，而它索要解決的問題卻又很複雜。 關於這一點，爲何 CSS 這麼難學？這個問題下的一百多個答案就很能說明問題了。

平常使用中，CSS 的痛點不少，但大多圍繞如下兩點：

• 全局污染：CSS 選擇器的做用域是全局的，因此很容易引發選擇器衝突；而爲了不全局衝突，又會致使類命名的複雜度上升
• 複用性低：CSS 缺乏抽象的機制，選擇器很容易出現重複，不利於維護和複用

CSS in JS

隨着組件化時代的來臨，前端應用開始從組件的層面對 CSS 進行封裝：也就是經過 JS 來聲明、抽象樣式從而提升組件的可維護性；在組件加載時動態的加載樣式，動態生成類名從而避免全局污染。

styled-components就是其中的佼佼者。

顧名思義，styled-components以組件的形式來聲明樣式，讓樣式也成爲組件從而分離邏輯組件與展現組件（這個思路看起來是否是很眼熟），來看一下官方的示例：

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: palevioletred;
  `}
`

render(
  <div>
    <Button
      href="https://github.com/styled-components/styled-components"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>

    <Button as={Link} href="/docs" prefetch>
      Documentation
    </Button>
  </div>
)

能夠看到，styled-components經過標記的模板字符來設置組件樣式.

它移除了組件和樣式之間的映射.當咱們經過styled-components定義樣式時,咱們其實是建立了一個附加了樣式的常規 React 組件.

同時它支持將props以插值的方式傳遞給組件,以調整組件樣式.

官方宣稱styled-components的優勢以下：

• Automatic critical CSS: styled-components 持續跟蹤頁面上渲染的組件,並向自動其注入且僅注入樣式. 結合使用代碼拆分, 能夠實現僅加載所需的最少代碼.
• 解決了 class name 衝突: styled-components 爲樣式生成惟一的 class name. 開發者沒必要再擔憂 class name 重複,覆蓋和拼寫錯誤的問題.
• CSS 更容易移除: 想要確切的知道代碼中某個 class 在哪兒用到是很困難的. 使用 styled-components 則很輕鬆, 由於每一個樣式都有其關聯的組件. 若是檢測到某個組件未使用而且被刪除,則其全部的樣式也都被刪除.
• 簡單的動態樣式: 能夠很簡單直觀的實現根據組件的 props 或者全局主題適配樣式,無需手動管理數十個 classes.
• 無痛維護: 無需搜索不一樣的文件來查找影響組件的樣式.不管代碼多龐大，維護起來都是小菜一碟。
• 自動提供前綴: 按照當前標準寫 CSS,其他的交給 styled-components 處理.

題外話

CSS 的問題，也有其餘解決方案，好比著名的CSS Module方案。社區中也一直存在對於二者孰優孰劣的爭執。

本文不會比較這兩種解決方案，但有興趣的朋友能夠參考一下這兩篇文章：

Styled Components: To Use or Not to Use?

Stop using CSS in JavaScript for web development