indesign logo
ham icon
icon-eye indesign mediaBy InDesign Media | icon-eye indesign mediaNov 12, 2017 | icon-eye indesign media713 Views
icon-eye indesign mediaNov 12, 2017
icon-eye indesign mediaBy 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!


  • facebook
  • Twitter
  • linkedin
  • Pinterest
Newletter Indesign Media

Our Working Platforms

We provide start-ups and major corporations with comprehensive services that include innovative web solutions and expert assistance.

InDesign Media WhatsApp
Home Services
Portfolio Contact