英文：Jonathan Saring

譯文：?眾成翻譯/_小生_

zcfy.cc/article/9-css-in-js-libraries-you-should-know-in-2018-bits-and-pieces

一個(gè)特別有趣的概念是在CSS中使用JS將CSS抽象到組件級(jí)別本身余赢，使用JavaScript以聲明性和可維護(hù)的方式描述樣式泡嘴。所以，我們已經(jīng)列出了一些有用的項(xiàng)目來開始孙乖。

您還可以閱讀這個(gè)推薦的討論 庸毫，以幫助您做出正確的決定逊抡，這是一個(gè)非车春酷的項(xiàng)目比較。讓我們深入了解一下吧甚垦。

1. Styled components

在Australian Whisky bar 的一個(gè)想法變成了一個(gè)18K星的項(xiàng)目茶鹃，在社區(qū)中被廣泛采用。樣式組件使得在React組件中使用CSS變得更加容易艰亮，方法是使用封裝樣式定義樣式化組件闭翩，而不使用CSS類作為中介層。

通過使用ES6模板文字表示法定義組件來創(chuàng)建樣式組件迄埃∧需荆可以根據(jù)需要將CSS屬性添加到組件中，就像通常使用CSS一樣调俘。解析JS時(shí)伶棒，樣式組件將生成唯一的類名旺垒，并將CSS注入DOM。您可以在Max Stoiber的精彩演講中了解更多信息肤无。

提示：Styled-components也可以與Bit組合先蒋，在應(yīng)用程序之間共享它們并在可視化的游樂場(chǎng)中進(jìn)行開發(fā)⊥鸾ィ看一看竞漾。

另請(qǐng)參閱：Wix-Eng的Stylable仍處于開發(fā)階段。

2. Radium

在6.5K星窥翩，由FormidableLabs創(chuàng)建业岁，Radium被定義為“React組件樣式的工具鏈”。它是使用React而不使用CSS來管理內(nèi)聯(lián)樣式的工具集寇蚊。 Radium提供標(biāo)準(zhǔn)接口和抽象笔时，用于處理內(nèi)聯(lián)樣式無法輕松容納的CSS功能。

Radium允許您將樣式與React組件捆綁在一起仗岸，將javascript允耿，html和樣式結(jié)合在一起。它還提供基于道具的渲染扒怖，允許您根據(jù)應(yīng)用的狀態(tài)設(shè)置組件樣式较锡。

3. Aphrodite

視頻：https://youtu.be/84VZ1BHMkUA

Aphrodite是一個(gè)與框架無關(guān)的CSS-in-JS庫(kù)，支持服務(wù)器端渲染盗痒，瀏覽器前綴和最小的CSS生成蚂蕴。 Aphrodite將所有內(nèi)容轉(zhuǎn)換為類并使用class屬性。

在4Kstars俯邓，這個(gè)項(xiàng)目有或沒有React工作骡楼，都一并提供諸如注入風(fēng)格的Dom，自動(dòng)前綴樣式等功能看成。

4. Emotion

在4.2K星級(jí)君编，Emotion是一個(gè)高性能且靈活的CSS-in-JS庫(kù)跨嘉，允許您使用字符串或?qū)ο髽邮皆O(shè)置應(yīng)用程序樣式川慌。它具有可預(yù)測(cè)的組合，以避免CSS的特殊性問題祠乃∶沃兀基于glam 庫(kù)及其理念，我們的想法是通過使用babel和PostCSS解析樣式來編寫CSS時(shí)保持運(yùn)行時(shí)性能亮瓷。核心運(yùn)行時(shí)為2.3kb琴拧，React支持為4kb。

5. Glamorous

注意：雖然該項(xiàng)目不再積極維護(hù)嘱支！但它還是很酷:)

在3.6K星級(jí)蚓胸，PayPal的Glamorous面向構(gòu)建“可恢復(fù)的CSS with React”挣饥，其靈感來自樣式組件和jsxtyle。 Kent C. Dodds 將該項(xiàng)目定義為“ React組件樣式通過優(yōu)雅（靈感）API解決沛膳，占地面積腥臃恪（小于5kb gzipped），以及出色的性能”锹安。它具有與樣式組件非常相似的API短荐，并使用類似的工具。

6. Glamor

受到這場(chǎng)精彩演講的啟發(fā)叹哭，Glamour小而有效忍宋。它允許您使用相同的Object CSS語法在組件中編寫內(nèi)聯(lián)CSS，React支持樣式prop风罩。它快速高效糠排，獨(dú)立于框架，服務(wù)器端/靜態(tài)渲染泊交，并添加了供應(yīng)商前綴/后備值乳讥。這是一篇簡(jiǎn)短的 API docs 介紹，Glamour中CSS技術(shù)的比較和Gatsby Glamby的有用教程 廓俭。

還可以看看：Glam（仍在工作中）

7. Fela

<FelaComponent
??style={{
????backgroundColor:?'blue',
????color:?'red'
??}}
??render={({?className,?theme?})?=>?(
????<div>I?am?red?on?blue.</div>
??)}
/>

Fela是一個(gè)為JavaScript中的狀態(tài)驅(qū)動(dòng)樣式構(gòu)建的項(xiàng)目云石，強(qiáng)調(diào)了三件事：默認(rèn)情況下使樣式動(dòng)態(tài)化，帶來框架無關(guān)（React的綁定）和高性能研乒。它是動(dòng)態(tài)的設(shè)計(jì)汹忠，并根據(jù)您的應(yīng)用程序狀態(tài)呈現(xiàn)樣式。它生成原子CSS并支持所有常見的CSS功能雹熬，如媒體查詢宽菜，偽類，關(guān)鍵幀和字體竿报。它可以與任何視圖庫(kù)一起使用铅乡，包括React native。您可以在此處閱讀有關(guān)V6功能的更多信息烈菌。

8. Styletron

擁有2.5k stars阵幸，Styletron是“面向組件的樣式工具包”。 Styletron支持無狀態(tài)芽世，單元素樣式的組件作為基本樣式挚赊，具有用于條件/動(dòng)態(tài)樣式的prop接口，以及通過（類型化）JavaScript對(duì)象組合的樣式济瓢，無需額外工具（例如Webpack加載器荠割，Babel插件等）。它對(duì)風(fēng)格對(duì)象的形狀也沒有任何意見旺矾。您可以在這個(gè)有趣的 HN thread中了解更多信息蔑鹦。

9. JSS

JSS是CSS的抽象夺克，它使用JavaScript以聲明和可維護(hù)的方式描述樣式。它是一個(gè)高性能的JS to CSS編譯器嚎朽，可在運(yùn)行時(shí)和服務(wù)器端運(yùn)行懊直。這個(gè)核心庫(kù)是低級(jí)別和框架不可知的，大約6KB（縮小和gzip壓縮）火鼻。它也可以通過插件API進(jìn)行擴(kuò)展室囊。這是一個(gè)很好的轉(zhuǎn)換SCSS（Sass）的教程。還可以查看React-JSS魁索，它是React的JSS集成融撞。

感興趣的小伙伴，可以關(guān)注公眾號(hào)【grain先森】粗蔚，回復(fù)關(guān)鍵詞 “小程序”尝偎，獲取更多資料，更多關(guān)鍵詞玩法期待你的探索~