前言
官方文檔地址: 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
方案。社區中也一直存在對於兩者孰優孰劣的爭執。
本文不會比較這兩種解決方案,但有興趣的朋友可以參考一下這兩篇文章: