在2018年你應該知道的9個關於CSS組件化的JS庫

一個特別有趣的概念是在CSS中使用JS將CSS抽象到組件級別自己，使用JavaScript以聲明性和可維護的方式描述樣式。因此，咱們已經列出了一些有用的項目來開始。

您還能夠閱讀這個推薦的討論 ，以幫助您作出正確的決定，這是一個很是酷的項目比較。讓咱們深刻了解一下吧。

1. Styled components

在Australian Whisky bar 的一個想法變成了一個18K星的項目，在社區中被普遍採用。樣式組件使得在React組件中使用CSS變得更加容易，方法是使用封裝樣式定義樣式化組件，而不使用CSS類做爲中介層。

經過使用ES6模板文字表示法定義組件來建立樣式組件。能夠根據須要將CSS屬性添加到組件中，就像一般使用CSS同樣。解析JS時，樣式組件將生成惟一的類名，並將CSS注入DOM。您能夠在Max Stoiber的精彩演講中瞭解更多信息。

提示：Styled-components也能夠與 Bit組合，在 應用程序之間共享它們並在 可視化的遊樂場中進行開發。看一看。

styled-components/styled-components _styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps…_github.com[](https://github.com/styled-com...

• 另請參閱：Wix-Eng的Stylable仍處於開發階段。

2. Radium

在6.5K星，由FormidableLabs建立，Radium被定義爲「React組件樣式的工具鏈」。它是使用React而不使用CSS來管理內聯樣式的工具集。 Radium提供標準接口和抽象，用於處理內聯樣式沒法輕鬆容納的CSS功能。

Radium容許您將樣式與React組件捆綁在一塊兒，將javascript，html和樣式結合在一塊兒。它還提供基於道具的渲染，容許您根據應用的狀態設置組件樣式。

FormidableLabs/radium _radium - A toolchain for React component styling._github.com[](https://github.com/Formidable...

3. Aphrodite

Aphrodite是一個與框架無關的CSS-in-JS庫，支持服務器端渲染，瀏覽器前綴和最小的CSS生成。 Aphrodite將全部內容轉換爲類並使用class屬性。

在4Kstars，這個項目有或沒有React工做，都一併提供諸如注入風格的Dom，自動前綴樣式等功能。

Khan/aphrodite _aphrodite - Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS…_github.com[](https://github.com/Khan/aphro...

4. Emotion

在4.2K星級，Emotion是一個高性能且靈活的CSS-in-JS庫，容許您使用字符串或對象樣式設置應用程序樣式。它具備可預測的組合，以免CSS的特殊性問題。基於glam 庫及其理念，咱們的想法是經過使用babel和PostCSS解析樣式來編寫CSS時保持運行時性能。核心運行時爲2.3kb，React支持爲4kb。

emotion-js/emotion _emotion - style as a function of state_github.com[](https://github.com/emotion-js...

5. Glamorous

注意：雖然該項目再也不積極維護！但它仍是很酷:)

在3.6K星級，PayPal的Glamorous面向構建「可恢復的CSS with React」，其靈感來自樣式組件和jsxtyle。 Kent C. Dodds 將該項目定義爲「 React組件樣式經過優雅（靈感）API解決，佔地面積小（小於5kb gzipped），以及出色的性能」。它具備與樣式組件很是類似的API，並使用相似的工具。

paypal/glamorous _glamorous - 💄 Maintainable CSS with React_github.com[](https://github.com/paypal/gla...

6. Glamor

受到這場精彩演講的啓發，Glamour小而有效。它容許您使用相同的Object CSS語法在組件中編寫內聯CSS，React支持樣式prop。它快速高效，獨立於框架，服務器端/靜態渲染，並添加了供應商前綴/後備值。這是一篇簡短的 API docs 介紹，Glamour中CSS技術的比較和Gatsby Glamby的有用教程 。

threepointone/glamor _glamor - inline css for react et al_github.com[](https://github.com/threepoint...

• 還能夠看看：Glam（仍在工做中）

7. Fela

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

Fela是一個爲JavaScript中的狀態驅動樣式構建的項目，強調了三件事：默認狀況下使樣式動態化，帶來框架無關（React的綁定）和高性能。它是動態的設計，並根據您的應用程序狀態呈現樣式。它生成原子CSS並支持全部常見的CSS功能，如媒體查詢，僞類，關鍵幀和字體。它能夠與任何視圖庫一塊兒使用，包括React native。您能夠在此處閱讀有關V6功能的更多信息。

rofrischmann/fela _fela - State-Driven Styling in JavaScript_github.com[](https://github.com/rofrischma...

8. Styletron

擁有2.5k stars，Styletron是「面向組件的樣式工具包」。 Styletron支持無狀態，單元素樣式的組件做爲基本樣式，具備用於條件/動態樣式的prop接口，以及經過（類型化）JavaScript對象組合的樣式，無需額外工具（例如Webpack加載器，Babel插件等）。它對風格對象的形狀也沒有任何意見。您能夠在這個有趣的 HN thread中瞭解更多信息。

rtsao/styletron _styletron -  Toolkit for component-oriented styling_github.com[](https://github.com/rtsao/styl...

9. JSS

https://codesandbox.io/s/z21lpmvv33

JSS is an abstraction over CSS which uses JavaScript to describe styles in a declarative and maintainable way. It is a high performance JS to CSS compiler which works at runtime and server-side. This core library is low level and framework agnostic, and is about 6KB (minified and gzipped). It can also be extended via plugins API. Here’s a nice tutorial for converting SCSS (Sass). Also check out React-JSS, a JSS integration for React.

JSS是CSS的抽象，它使用JavaScript以聲明和可維護的方式描述樣式。它是一個高性能的JS to CSS編譯器，可在運行時和服務器端運行。這個核心庫是低級別和框架不可知的，大約6KB（縮小和gzip壓縮）。它也能夠經過插件API進行擴展。這是一個很好的轉換SCSS（Sass）的教程。還能夠查看React-JSS，它是React的JSS集成。

cssinjs/jss _jss - JSS is an authoring tool for CSS which uses JavaScript as a host language._github.com[](https://github.com/cssinjs/jss)

ps：
在構建 Bit時，將組件轉換爲可在任何地方共享，使用和開發的構建塊，咱們必須深刻熟悉人們選擇在生態系統中設置組件樣式的各類方式。
Bit - Share and build with code components _Bit helps you share, discover and use code components between projects and applications to build new features and…_bitsrc.io[]( https://bitsrc.io)