All You Need To Know About CSS-in-JS

By InDesign Media |

Nov 12, 2017 |

819 Views

Nov 12, 2017

By InDesign Media

Styled React Component Example

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).

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. In addition, please feel free to use CSS-in-CSS — on no terms are you obligated to use CSS-in-JS. Also, use 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. And, 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 feel awkward having to maintain a huge folder of stylesheets. Not to mention, i would like to try different approaches. Also, I saw many people asking if there are new styling ideas. CSS-in-JS is so far the best concept.

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. Similarly, 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. Additionally, 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!

Readmore:https://medium.com/@wesharehoodies/all-you-need-to-know-about-css-in-js-984a72d48ebc