Member-only story
All You Need To Know About CSS-in-JS
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’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.
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…
