All You Need To Know About CSS-in-JS

Indrek Lasn
Nov 9, 2017 · 5 min read
Image for post
Image for post
design by Anna Dadej

TL;DR: Thinking in componentsNo longer do you have to maintain a bunch of style sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity).

Styled React Component Example

Image for post
Image for post

You’ve probably heard terms like CSS-in-JS, Styled Components, Radium, and Aphrodite, and you’re left there thinking, “Why is this relevant to me? I’m perfectly happy with CSS-in-CSS (CSS in .css).

I’m here to shine some light on why this is relevant, and hopefully, we will at least understand the concept, and understand why it’s relevant. With that said, please feel free to use CSS-in-CSS. You are not obligated to use CSS-in-JS. Whatever works best for you and makes you happy is hands down the best solution, always!

CSS-in-JS is a delicate and controversial topic. I’m advocating having an open mind, and considering if this makes sense to you. Ask yourself, “Will it improve my workflow?” In the end, the only thing that matters is to use tools that make you happier and more productive.

I’ve always felt awkward having to maintain a huge folder of stylesheets. I would like to try different approaches. I’ve seen many people asking if there are new styling ideas. CSS-in-JS is, so far, the best concept.

Let’s give CSS-in-JS a shot.

Image for post
Image for post
Small-To-Medium size project CSS

What is CSS-in-JS?

JSS is a more powerful abstraction over CSS. It uses JavaScript as a language 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. It is about 6KB (minified and gzipped) and is extensible via plugins API. — source

Keep in mind that inline styles and CSS-in-JS are not the same! They’re different, as shown below in a demonstration.

How Inline Styles Work

inline styles

In the browser, this will get attached to the DOM node like so:

How CSS-in-JS Works

In the browser, this will get attached to the DOM like so:

Difference

See the slight difference? CSS-in-JS attached a <style> tag on top of the DOM, while inline styles just attached the properties to the DOM node.

Why does this matter?

Not all CSS features can be aliased with JavaScript event handlers. Many pseudo selectors (like :disabled, :before, :nth-child) aren’t possible, styling the html and body tags aren’t supported, etc.

With CSS-in-JS, you have all the power of CSS at your fingertips. Since actual CSS is generated, you can use every media query and pseudo selector you can think of. Some libraries (like jss, styled-components) even add support for neat, non-CSS-native features, like nesting!

Why don’t we just use CSS-in-CSS and be done with it?

While that’s the case for how it’s been done for a long time, the challenge is that the modern web is written in components, not pages.

CSS was never actually made for component-based approaches. CSS-in-JS solves exactly this problem. Shout-out to Vue for solving this problem beautifully, even though Vue’s styles have no access to component state.

What Are the Benefits of Using CSS-in-JS?

  • Thinking in components. No longer do you have to maintain a bunch of stylesheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity).
  • CSS-in-JS leverages the full power of the JavaScript ecosystem to enhance CSS.
  • True rules isolation. Scoped selectors are not enough. CSS has properties which are inherited automatically from the parent element, if not explicitly defined. Thanks to the jss-isolate plugin, JSS rules will not inherit properties.
  • Scoped selectors. CSS has just one global namespace. It is impossible to avoid selector collisions in non-trivial applications. Naming conventions, like BEM, might help within one project, but will not help when integrating third-party code. JSS generates unique class names by default, when it compiles JSON representation to CSS.
  • Vendor prefixing. The CSS rules are automatically vendor prefixed, so you don’t have to think about it.
  • Code sharing. Easily share constants and functions between JS and CSS.
  • Only the styles which are currently in use on your screen are in the DOM (react-jss).
  • Dead code elimination.
  • Unit tests for CSS.

What Are the Drawbacks of Using CSS-in-JS?

  • Learning curve.
  • New dependencies.
  • Harder for newer teammates to adapt to the codebase. People who are new to the front end have to learn more things.
  • Challenging the status quo (not necessarily a con).

The pros outweigh the cons heavily — let’s give CSS-in-JS a shot!

Most Popular CSS-in-JS Libaries

A quick ‘Hello World’ example for all the popular CSS-in-JS libraries. Choose which one you like best, based on the syntax.

Image for post
Image for post
NPM trends

Styled Components

Image for post
Image for post

Radium (Caveat: Uses Inline Styles)

Image for post
Image for post

Note: Radium uses decorators!

Aphrodite

Styletron

Image for post
Image for post

These are really simple examples, that demonstrate the core functionality. All of the libraries have much more functionality included, for example theming, dynamic props, server-side rendering, and much more.

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Software engineer, tech journalist, startups. Stay up to date https://thewholesome.dev, https://crushingit.substack.com Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Indrek Lasn

Written by

Software engineer, tech journalist, startups. Stay up to date https://thewholesome.dev, https://crushingit.substack.com Twitter @ https://twitter.com/lasnindrek

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store