9 CSS in JS Libraries You Should Know in 2018

转自：https://blog.bitsrc.io/9-css-in-js-libraries-you-should-know-in-2018-25afb4025b9b

实际上  wix 的 stylable 也不错，网上也有相关的比较,以及有优缺点说明

Some of the best CSS in Javascript libraries to use in your app.

When building Bit, turning components into building blocks which can be shared, used and developed anywhere, we had to get deeply familiarized with the various ways people choose to style components in the ecosystem.

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

One particularly interesting concept is using JS in CSS to abstract CSS to the component level itself, using JavaScript to describe styles in a declarative and maintainable way. So, we’ve listed some useful projects to get started.

You can also read this recommended discussion to help you make a good decision, and here’s a very cool comparison of projects. Let’s dive in.

1. Styled components

An idea born in an Australian Whisky bar turned into an 18K stars project, widely adopted in the community. Styled-components makes it easier to use CSS in React components, by defining styled-components with encapsulated styles without CSS classes as a mediator layer.

Styled-components are created by defining components using the ES6 template literal notation. CSS properties can be added to the component as needed, just like you would normally do using CSS. When the JS is parsed, styled-components will generate unique class names, and inject the CSS into the DOM. You can learn more in this great talk by Max Stoiber.

Tip: Styled-components can also be combined with Bit, to share them between apps and develop in a visual playground. Take a look.

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

• Also check out: Stylable by Wix-Eng which is still in development.

2. Radium

At 6.5K stars and created by FormidableLabs, Radium is defined as “A toolchain for React component styling”. It’s set of tools to manage inline styles with React without CSS. Radium offers a standard interface and abstractions for dealing with CSS features that inline styles don’t easily accommodate

Radium lets you bundle up styles with your React components, coupling javascript, html, and styling together. It also provides props-based rendering, allowing you to style your components based on the state of your app.

FormidableLabs/radium
radium - A toolchain for React component styling.github.com

3. Aphrodite

Aphrodite is a framework-agnostic CSS-in-JS library with support for server-side rendering, browser prefixing, and minimum CSS generation. Aphrodite transforms everything into classes and uses the class attribute.

At 4K stars, this project works with or without React and provides features such as injecting styled into the Dom, auto prefixes styles and more, all at a relatively small size of 20k and a handful of dependancies. Here’s a useful Aphrodite vs. Radium rundown.

Khan/aphrodite
aphrodite - Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS…github.com

4. Emotion

At 4.2K stars Emotion is a performant and flexible CSS-in-JS library which allows you to style apps with string or object styles. It has predictable composition to avoid specificity issues with CSS. Based on the glam library and its philosophy the idea is to retain runtime performance when writing CSS by parsing styles with babel and PostCSS. The core runtime is 2.3kb and with React support, 4kb. Emotion isn’t limited to React.

emotion-js/emotion
emotion - style as a function of stategithub.com

5. Glamorous

Note: the project is no longer actively maintained! still cool though :)

At 3.6K stars PayPal’s Glamorous is oriented for building “maintainable CSS with React” inspired by styled-components and jsxtyle. Kent C. Doddsdefinethe project as “React component styling solved with an elegant (inspired) API, small footprint (<5kb gzipped), and great performance (via glamor)”. It has a very similar API to styled-components and uses similar tools under the hood.

paypal/glamorous
glamorous -