CSS in JS?

Does anyone have opinions about CSS in JS? I’m looking at how React Styled Components and JSS work. It seems like it’s similar to Vue’s single-file, scoped components.

https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc

I also found a rant about it below.

I’m curious if anyone here with experience in React (or Gatsby.js) who has an opinion about it. :slight_smile:

Not sure if Google started the trend of Polymer Elements and their component-based styling but it’s difficult to say whether or not this is the way to go. (The thought would be that a component should style itself.)

This is all well and good until you get someone with different needs. What does that page look like to a blind person or someone who’s nearly so? Or what happens when you need to print the page and you’re just interested in the information itself and not all the animation tricks and such? There was a reason why we separated CSS from the content itself and sometimes people forget all this.

In my mind, the React component could reference a CSS class by name and then just package the data into a DIV tag or similar. Let that class deal with it. And then if the user’s default language reads right-to-left, then you could adjust that somewhere if necessary. It just feels dangerous to me when React coders are assuming a one-size-fits-all styling solution.

I’ve been using “Emotion” and like it so far:
https://emotion.sh/docs/introduction

also twin.macro which combines Tailwind CSS with Emotion (or Styled Components):