Top best CSS-in-JS library you should know

Top best CSS-in-JS library you should know

In this article, we'll have a look at the most popular CSS-in-JS libraries currently on the market.Some of the best CSS in JavaScript libraries to use in your app.

“Styling components” is one of the most interesting debates in the community lately. Different concepts range from inline CSS to Sass, Less and much more.

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. With the release of the popular styled-components project by Max Stoiber, this concept is more mainstream today than ever.

So, to help you dive in and try it for yourself, we’ve listed some useful libraries for using CSS in JavaScript to style your components.

Let’s get started. You can read this recommended discussion to help you make a good decision, and here’s a very cool comparison of projects. Good luck!

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.

https://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 accommodateRadium 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.

GitHub

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.

GitHub

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.

 GitHub

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. Dodds define the 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.

GitHub

6. Glamor

Inspired by ideas from this great talk, Glamor is small and effective. It lets you write inline CSS in your components using the same Object CSS syntax React supports for the style prop. It’s fast and efficient, framework independent, serverside / static rendering and adds vendor prefixes / fallback values. Here’s a short API docs intro, a comparison of CSS techniques in Glamor and a useful tutorial of Glamor with Gatsby.

 GitHub

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, bring framework-agnostic (Bindings for React), and being performant. It’s dynamic by design and renders styles depending on your application state. It generates atomic CSS and supports all common CSS features such as media queries, pseudo classes, keyframes and font-faces. It can be used with any view library, including React native. You can read more about V6 features here.

 GitHub

8. Styletron

Thanks to this code-carrot post

At 2500 stars Styletron is a “toolkit for component-oriented styling”. Styletron supports stateless, single-element styled components as base styling primitive with prop interfaces for conditional/dynamic styling, and a composition of styles via (typed) JavaScript objects without extra tooling (e.g. Webpack loaders, Babel plugins, etc.). It’s also un-opinionated about the shape of style objects. You can learn more at this interesting HN thread.

GitHub

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.

GitHub


Originally published by Jonathan Saring at blog.bitsrc.io

===========================================

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Top 12 React.js Libraries you should know about in 2019

24 JavaScript Libraries for Creating Beautiful Charts

Top 5 JS Frameworks And Libraries You Should Know in 2019

Best JS Color Picker Libraries

The 7 best JavaScript date libraries


css javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire CSS Developer

Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown. W will build a Responsive Website with HTML, CSS, and JavaScript

Learn to use variables in CSS (CSS Tricks)

whats the variable in CSS, how to declare use them. Whats the benefit of variables in CSS. Lets learn all this. #Variables #CSS #HTML #CssVariables #ITArticles

Animated Background For Website Header using CSS and Vanilla Javascript

In this video, you'll see Animated Background For Website Header using CSS & Vanilla Javascript - CSS Animation Effects

CSS Button Generator (Mini) using HTML, CSS, and JavaScript

Learn how to create a mini CSS Button generator just by using HTML, CSS, and JavaScript. We will only cover some properties related to the button but you can use other properties to allow users to play around with different styles and designs.