国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

styled-components 中文文檔翻譯及不完全指北

Vicky / 2293人閱讀

摘要：前言官方文檔地址中文文檔地址是一個(gè)的第三方庫，是的優(yōu)秀實(shí)踐。初次了解是在讀林昊翻譯的設(shè)計(jì)模式與最佳實(shí)踐一書時(shí)。能力所限，已翻譯部分可能仍有字詞錯(cuò)誤或語句不通順的地方，歡迎有能力的同學(xué)幫助糾正。就是其中的佼佼者。

前言

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

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

styled-components是一個(gè)React的第三方庫，是CSS in JS的優(yōu)秀實(shí)踐。

初次了解styled-components是在讀林昊翻譯的React設(shè)計(jì)模式與最佳實(shí)踐一書時(shí)。雖然接觸的比較晚，但深深的被它的強(qiáng)大和優(yōu)雅所吸引。然而其中文資料比較匱乏，為幫助更多的小伙伴了解這個(gè)強(qiáng)大的工具，翻譯了部分官方文檔。能力所限，已翻譯部分可能仍有字詞錯(cuò)誤或語句不通順的地方，歡迎有能力的同學(xué)幫助糾正。

styled-components究竟強(qiáng)在哪里？這要從它所解決的問題說起：

CSS 的痛點(diǎn)

不可否認(rèn)，CSS是一門神奇的“語言”（What kind of language is CSS?）。

它易于上手、卻難以精通。它沒有變量、函數(shù)等概念導(dǎo)致它的表現(xiàn)力要稍弱于其它語言，而它索要解決的問題卻又很復(fù)雜。 關(guān)于這一點(diǎn)，為什么 CSS 這么難學(xué)？這個(gè)問題下的一百多個(gè)答案就很能說明問題了。

日常使用中，CSS 的痛點(diǎn)很多，但大多圍繞以下兩點(diǎn)：

全局污染：CSS 選擇器的作用域是全局的，所以很容易引起選擇器沖突；而為了避免全局沖突，又會(huì)導(dǎo)致類命名的復(fù)雜度上升

復(fù)用性低：CSS 缺少抽象的機(jī)制，選擇器很容易出現(xiàn)重復(fù)，不利于維護(hù)和復(fù)用

CSS in JS

隨著組件化時(shí)代的來臨，前端應(yīng)用開始從組件的層面對(duì) CSS 進(jìn)行封裝：也就是通過 JS 來聲明、抽象樣式從而提高組件的可維護(hù)性；在組件加載時(shí)動(dòng)態(tài)的加載樣式，動(dòng)態(tài)生成類名從而避免全局污染。

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

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

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通過標(biāo)記的模板字符來設(shè)置組件樣式.

它移除了組件和樣式之間的映射.當(dāng)我們通過styled-components定義樣式時(shí),我們實(shí)際上是創(chuàng)建了一個(gè)附加了樣式的常規(guī) React 組件.

同時(shí)它支持將props以插值的方式傳遞給組件,以調(diào)整組件樣式.

官方宣稱styled-components的優(yōu)點(diǎn)如下：

Automatic critical CSS: styled-components 持續(xù)跟蹤頁面上渲染的組件,并向自動(dòng)其注入且僅注入樣式. 結(jié)合使用代碼拆分, 可以實(shí)現(xiàn)僅加載所需的最少代碼.

解決了 class name 沖突: styled-components 為樣式生成唯一的 class name. 開發(fā)者不必再擔(dān)心 class name 重復(fù),覆蓋和拼寫錯(cuò)誤的問題.

CSS 更容易移除: 想要確切的知道代碼中某個(gè) class 在哪兒用到是很困難的. 使用 styled-components 則很輕松, 因?yàn)槊總€(gè)樣式都有其關(guān)聯(lián)的組件. 如果檢測到某個(gè)組件未使用并且被刪除,則其所有的樣式也都被刪除.

簡單的動(dòng)態(tài)樣式: 可以很簡單直觀的實(shí)現(xiàn)根據(jù)組件的 props 或者全局主題適配樣式,無需手動(dòng)管理數(shù)十個(gè) classes.

無痛維護(hù): 無需搜索不同的文件來查找影響組件的樣式.無論代碼多龐大，維護(hù)起來都是小菜一碟。

自動(dòng)提供前綴: 按照當(dāng)前標(biāo)準(zhǔn)寫 CSS,其余的交給 styled-components 處理.

題外話

CSS 的問題，也有其他解決方案，比如著名的CSS Module方案。社區(qū)中也一直存在對(duì)于兩者孰優(yōu)孰劣的爭執(zhí)。

本文不會(huì)比較這兩種解決方案，但有興趣的朋友可以參考一下這兩篇文章：

Styled Components: To Use or Not to Use?

Stop using CSS in JavaScript for web development

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114237.html

相關(guān)文章

  • styled-components 中文文檔翻譯及不完全指北

    摘要：前言官方文檔地址中文文檔地址是一個(gè)的第三方庫，是的優(yōu)秀實(shí)踐。初次了解是在讀林昊翻譯的設(shè)計(jì)模式與最佳實(shí)踐一書時(shí)。能力所限，已翻譯部分可能仍有字詞錯(cuò)誤或語句不通順的地方，歡迎有能力的同學(xué)幫助糾正。就是其中的佼佼者。 前言 官方文檔地址： https://www.styled-components.com/ 中文文檔地址：https://github.com/hengg/styled-com...

    OnlyLing 評(píng)論0 收藏0

  • React項(xiàng)目實(shí)戰(zhàn)：環(huán)境搭建

    摘要：官方文檔中文翻譯構(gòu)建用戶界面的庫。官方文檔建議學(xué)習(xí)時(shí)以官方文檔為準(zhǔn)，中文翻譯或者第三方作者的教程可以幫助你理清思路會(huì)用到的重要知識(shí)點(diǎn)我也會(huì)進(jìn)行簡明的解釋，如遇到錯(cuò)誤或者不理解的內(nèi)容，歡迎實(shí)時(shí)指出。 前言 前面提到前端大統(tǒng)一的概念，如果感興趣，歡迎說說自己的看法，點(diǎn)擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個(gè)小建議： 如果對(duì)Weex App感興趣，應(yīng)該選擇vue框架； 如果...

    cnio 評(píng)論0 收藏0

  • React項(xiàng)目實(shí)戰(zhàn)：環(huán)境搭建

    摘要：官方文檔中文翻譯構(gòu)建用戶界面的庫。官方文檔建議學(xué)習(xí)時(shí)以官方文檔為準(zhǔn)，中文翻譯或者第三方作者的教程可以幫助你理清思路會(huì)用到的重要知識(shí)點(diǎn)我也會(huì)進(jìn)行簡明的解釋，如遇到錯(cuò)誤或者不理解的內(nèi)容，歡迎實(shí)時(shí)指出。 前言 前面提到前端大統(tǒng)一的概念，如果感興趣，歡迎說說自己的看法，點(diǎn)擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個(gè)小建議： 如果對(duì)Weex App感興趣，應(yīng)該選擇vue框架； 如果...

    GHOST_349178 評(píng)論0 收藏0

  • PHP 標(biāo)準(zhǔn)規(guī)范中文版發(fā)布

    摘要：本文經(jīng)授權(quán)轉(zhuǎn)自社區(qū)文檔頁面項(xiàng)目團(tuán)隊(duì)在定制編碼規(guī)范，發(fā)現(xiàn)原本的已經(jīng)有點(diǎn)年久失修。并且沒有遵循中文文案排版指北規(guī)范在書寫文檔，而我們團(tuán)隊(duì)的文案統(tǒng)一遵循排版指北的標(biāo)準(zhǔn)，猶豫之下就自己的一個(gè)，并翻譯了緩存接口還有大部分的消息接口規(guī)范。 本文經(jīng)授權(quán)轉(zhuǎn)自 PHPHub 社區(qū) showImg(https://segmentfault.com/img/remote/1460000006780523);...

    CloudwiseAPM 評(píng)論0 收藏0

  • 2017-10-20 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選作者的構(gòu)思和演繹翻譯新特性大殺器和把動(dòng)畫轉(zhuǎn)換成原生動(dòng)畫菜鳥的學(xué)習(xí)之路中文舊文與知乎專欄舊文新讀解釋閉包需要幾行代碼知乎專欄前端校招總結(jié)個(gè)人文章函數(shù)式編程系列優(yōu)雅的使用進(jìn)行函數(shù)編程掘金微軟谷歌三星將一起構(gòu)建的統(tǒng)一文檔 2017-10-20 前端日?qǐng)?bào) 精選 React作者的構(gòu)思和演繹（翻譯）Make React Great Again —— React v16 新特性大殺器Bo...

    Genng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<