All You Need To Know About CSS-in-JS

All You Need To Know About CSS-in-JS
By ID Media | Sunday 12th November 2017

TL;DR: Thinking in components — No 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

You probably heard terms like CSS-in-JS, Styled Components, Radium, Aphrodite and you’re left there hanging “why is this a thing? — I’m perfectly happy with CSS-in-CSS (CSS in .css).”

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

CSS-in-JS is a delicate and controversial topic — I’m advocating having an open mind and weighing if this makes sense to you — ask yourself “will it improve my workflow?” — in the end — that’s the only thing that matters — 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.

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 Inline styles and CSS-in-JS are not the same! They’re different — Quick demonstration time!