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