9 CSS in JS Libraries-should Know in 2018

Transferred from: https://blog.bitsrc.io/9-css-in-js-libraries-you-should-know-in-2018-25afb4025b9b

In fact, WiX stylable is also good, there are related comparisons on the web, as well as the pros and cons of some of the best CSS in Javascript libraries-to-use in the Your app.

When building Bit, turning components to building blocks which can be shared, used and developed ANYWH Ere, 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 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 the styles in a declarative and maintainable. So, we've listed some useful projects to get started.

You can also-read This recommended discussion-to-help-a good decision, and here's a very cool Comparison of projects. Let's dive in.

1. Styled components

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

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

Tip: Styled-components can also is 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 are still in development.

2. Radium

At 6.5K stars and created by Formidablelabs, Radium are defined as "A toolchain for React component Styling". It's set of tools to manage the inline styles with React without CSS. Radium offers a standard interface and abstractions for dealing with CSS features that inline styles don ' t easily accommod Ate

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 The based app in the state.

Formidablelabs/radium
radium-a toolchain for React component styling.Github.com3. 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 PR Efixes 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.COM4. Emotion

At 4.2K stars Emotion was a performant and flexible Css-in-js library which allows you to the 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 was to retain runtime performance when writing CSS by parsing styles with Babel and Postcss. The core runtime is a 2.3kb and with React support, 4KB. Emotion isn ' t limited to React.

emotion-js/emotion
Emotion-style as a function of stateGITHUB.COM5. 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. doddsdefine the project as "React component styling solved with an elegant (inspired) API, smal L 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-?? Maintainable CSS with ReactGithub.com6. Glamor

Inspired by Ideas The great talk, glamor is small and effective.  It lets you write inline CSS in your components using the-same Object CSS syntax React supports style for the Prop. It's fast and efficient, framework independent, serverside/static rendering and adds vendor Prefixes/fallback values. Here 's a short API for docs intro, A comparison of CSS techniques in glamor and a useful Tutorial of Glamor with Gatsby.

Threepointone/glamor
glamor-inline css for react et alGithub.com

• Also Check out: Glam (still under work)

7. Fela

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

Fela is a project built for State-driven styling in JavaScript, emphasizing 3 things:make styling dynamic by default, BRI ng framework-agnostic (Bindings for React), and being performant. It's dynamic by design and renders styles depending in your application state. It generates atomic CSS and supports all common CSS features such as media queries, pseudo classes, keyframes and FONT-FAC Es. It can be used with any view library, including React native. You can read more about V6 features here.

Rofrischmann/fela
fela-state-driven styling in JavaScriptGithub.com8. Styletron

At 2500 stars Styletron are a "toolkit for component-oriented styling". Styletron supports stateless, single-element styled components as base styling primitive with prop interfaces for Conditio Nal/dynamic styling, and a composition of styles via (typed) JavaScript objects without extra tooling (e.g. Webpack loader S, Babel plugins, etc.). It ' s also un-opinionated about the shape of Style objects. You can learn more at the This interesting HN thread.

Rtsao/styletron
Styletron-: Zap:toolkit for component-oriented stylingGithub.com9. JSS

JSS is an abstraction over CSS which uses JavaScript to describe styles in a declarative and maintainable. It is a -high performance JS-to-CSS compiler which works at runtime and Server-side. The This core library is a low level and framework agnostic, and are 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.

CSSINJS/JSS
JSS-JSS is an authoring tool for CSS which uses JavaScript as a host language.Github.com Honorable Mentions Gajus/react-css-modules
react-css-modules-seamless mapping of class names to CSS modules inside of react.Github.com Martinandert/babel-plugin-css-in-js
Babel-plugin-css-in-js?—? A plugin for Babel V6 which transforms inline styles defined in JavaScript modules into class ...Github.com Callstack/linaria
linaria-zero-runtime CSS in JS libraryGithub.com Typestyle/typestyle
typestyle-making CSS typesafe??Github.com Streamich/freestyler
freestyler-5th Generation Css-in-js LibraryGithub.com Airbnb/react-with-styles
React-with-styles-use Css-in-javascript with themes for react without being tightly coupled to one implementationGithub.com Jsxstyle/jsxstyle
jsxstyle-inline style system for React and PreactGithub.com

9 CSS in JS Libraries-should Know in 2018