資訊專欄INFORMATION COLUMN
摘要：前言官方文檔地址中文文檔地址是一個的第三方庫，是的優秀實踐。初次了解是在讀林昊翻譯的設計模式與最佳實踐一書時。能力所限，已翻譯部分可能仍有字詞錯誤或語句不通順的地方，歡迎有能力的同學幫助糾正。就是其中的佼佼者。
前言
官方文檔地址： 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(
)
可以看到，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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114237.html
摘要：前言官方文檔地址中文文檔地址是一個的第三方庫，是的優秀實踐。初次了解是在讀林昊翻譯的設計模式與最佳實踐一書時。能力所限，已翻譯部分可能仍有字詞錯誤或語句不通順的地方，歡迎有能力的同學幫助糾正。就是其中的佼佼者。 前言 官方文檔地址： https://www.styled-components.com/ 中文文檔地址：https://github.com/hengg/styled-com...
摘要：官方文檔中文翻譯構建用戶界面的庫。官方文檔建議學習時以官方文檔為準，中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點我也會進行簡明的解釋，如遇到錯誤或者不理解的內容，歡迎實時指出。 前言 前面提到前端大統一的概念，如果感興趣，歡迎說說自己的看法，點擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個小建議： 如果對Weex App感興趣，應該選擇vue框架； 如果...
摘要：官方文檔中文翻譯構建用戶界面的庫。官方文檔建議學習時以官方文檔為準，中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點我也會進行簡明的解釋，如遇到錯誤或者不理解的內容，歡迎實時指出。 前言 前面提到前端大統一的概念，如果感興趣，歡迎說說自己的看法，點擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個小建議： 如果對Weex App感興趣，應該選擇vue框架； 如果...
摘要：本文經授權轉自社區文檔頁面項目團隊在定制編碼規范，發現原本的已經有點年久失修。并且沒有遵循中文文案排版指北規范在書寫文檔，而我們團隊的文案統一遵循排版指北的標準，猶豫之下就自己的一個，并翻譯了緩存接口還有大部分的消息接口規范。 本文經授權轉自 PHPHub 社區 showImg(https://segmentfault.com/img/remote/1460000006780523);...
摘要：前端日報精選作者的構思和演繹翻譯新特性大殺器和把動畫轉換成原生動畫菜鳥的學習之路中文舊文與知乎專欄舊文新讀解釋閉包需要幾行代碼知乎專欄前端校招總結個人文章函數式編程系列優雅的使用進行函數編程掘金微軟谷歌三星將一起構建的統一文檔 2017-10-20 前端日報 精選 React作者的構思和演繹（翻譯）Make React Great Again —— React v16 新特性大殺器Bo...
閱讀 2595·2023-04-25 15:07
閱讀 704·2021-11-24 10:21
閱讀 2298·2021-09-22 10:02
閱讀 3516·2019-08-30 15:43
閱讀 3221·2019-08-30 13:03
閱讀 2287·2019-08-29 17:18
閱讀 3585·2019-08-29 17:07
閱讀 1872·2019-08-29 12:27
