Component-Scoped CSS in React

[greaber]

The guide says

Unless you spread components out over multiple files (for example with CSS Modules), scoping CSS in React comes with caveats. Very basic CSS works great out-of-the-box, but some more complex features such as hover states, media queries, and pseudo-selectors all either require heavy dependencies to reinvent what CSS already does - or they simply don’t work.

This is needlessly spreading fud. In React, you can just style your components with classes and style those classes in css files (or sass or less). This is how web development has always been done, and it is familiar to designers. As for scoping, I just prefix classes with a component-specific prefix and don't find this to be much of a problem, but there are other options like CSS Modules available. There are also options for keeping styling in the same file as the rest of the component, for instance see https://github.com/cssinjs/react-jss, which has additional benefits.

The complex features you mention are only an issue if you use inline styles. Doing that has some advantages that go far beyond scoping, but it is also kind of radical.

[chrisvfritz]

@greaber I'd like to point out that the React team approved this comparison less than 2 months ago, so it's definitely not FUD. If there have been new developments in that time however, we're happy to update to reflect the evolving ecosystem. If that's the case, could you clarify which part of that paragraph you find misleading or false?

To address your other comments:

You can just style your components with classes and style those classes in css files (or sass or less).

Yes, global CSS is still a thing, though it has nothing to do with React, Vue, or any JavaScript library. This section is titled Component-Scoped CSS, so that's what we're discussing here.

This is how web development has always been done

Appeal to Tradition fallacy.

it is familiar to designers.

I've worked with CSS in React projects for even longer than I have with Vue. Designers that write CSS usually also want to edit HTML. With Vue, they can not only write the same CSS (or CSS preprocessor) they're used to and have it automatically be scoped to components without having to think about it, but they can also edit familiar HTML. Having to jump into JavaScript and JSX with React has been much less friendly.

As for scoping, I just prefix classes with a component-specific prefix and don't find this to be much of a problem

That's great you don't find it much of a problem, but creating a prefix for every component and staying consistent with that prefix across multiple files, while also maintaining discipline in not using that hand-scoped CSS across multiple components is still not as convenient as adding only a single word (scoped) in a single component file.

there are other options like CSS Modules available.

Yep, we actually mention CSS Modules in the very first sentence you quoted.

There are also options for keeping styling in the same file as the rest of the component, for instance see https://github.com/cssinjs/react-jss, which has additional benefits.

Yes, there are many libraries like this. I mention them in "heavy dependencies to reinvent what CSS already does." JSS is an extra 5KB min+zip to your build, plus the weight of all the plugins (like jss-nested if you want pseudo-selectors :hover) and additional libraries like color for essential color manipulation. In my experience, those really add up quick. There are also issues I didn't even mention in the comparison where the compiled CSS is wrong or the result is unexpected.

These are classes of problems that simply don't exist with Vue's CSS scoping.

[greaber]

Hi, Chris, I am (of course) not saying that there have been new developments in the last two months that invalidate the conclusions of the React team. That said, if the React team itself were writing this comparison, I'm sure it would look a lot different that what your comparison looks like. It seems to me that you guys came to a sort of tolerant compromise; it isn't that they endorsed your comparison so strongly that any criticism must reflect disagreement with them.

I think the scoped CSS section will give the impression to some people that there is something really hard about CSS in React, and that is not accurate. Especially the idea that things might seem to work at first but there will be problems down the line is scary to people.

It is interesting that you have found designers react positively to editing Vue. As a programmer, I have an instinctual reaction against implementing a new programming language in html, and I really liked React for its Just Javascript approach. But it makes sense that designers might be more comfortable with Vue.

[chrisvfritz]

I am (of course) not saying that there have been new developments in the last two months that invalidate the conclusions of the React team.

My comment about new developments in the last couple months was earnest. For example, styled-components was released just a few weeks ago and may be a game changer. I haven't had time to look too much into it, but from what I've heard, it allows you to use every feature of normal CSS (without caveats) within component files, even with syntax highlighting. That's awesome! From my understanding, it also adds extremely little weight to the build, as it's just a thin layer over real CSS made dynamic by embedding JS in a template string.

I believe features like color manipulation would still require additional dependencies, so that wouldn't be ideal. It also requires designers to write ES2015 JavaScript, so that's not great either. If it really does provide what it promises however, it's possibly now the best option for teams where designers are either programmers or aren't editing code at all.

It seems to me that you guys came to a sort of tolerant compromise

It was certainly a discussion, but I don't think it was a compromise. Every single section that Dan felt uncomfortable with was updated until he was happy. There was never anything we refused to change after discussion and no impasses where we couldn't agree, so settled on something neither of us fully endorsed. I'm actually much happier with the comparison after his feedback.

I think the scoped CSS section will give the impression to some people that there is something really hard about CSS in React, and that is not accurate. Especially the idea that things might seem to work at first but there will be problems down the line is scary to people.

If it were simple, people wouldn't keep inventing new solutions. And when new solutions popped up, users wouldn't keep jumping on them like life rafts. The fact that there may be problems down the line when using CSS-in-JS solutions is a fact that should be scary. I've worked with them in React for over 2 years. A lot of my work was React consulting for a while, so I've even used a pretty wide variety. I've experienced the trade-offs and gotchas first-hand. One such library (Aphrodite) even uses the tagline It's inline styles, but they work!, because styles not working is such a common experience. Even that tagline is unfortunately more of an aspiration than a reality.

[greaber]

You have mostly convinced me that the section is OK as it is, so I will close the issue. Thank you for the engagement.

[iammerrick]

@chrisvfritz

It has been a while and while vue has a wonderful prescription. React has a nearly identical cousin now in styled-jsx. Was reading the guide and thinking this is a really nuanced and fair comparison but found the CSS section to be no longer representative of the current options in React.

Really great comparison and framework. Just wanted to bump this. I think a fair criticism is that React doesn't offer anything like this themselves but it seems styled-jsx gives a React developer the vue experience only instead of using "scoped" they use "jsx", the technique for scoping is identical from what I can tell. :-)

[chrisvfritz]

@iammerrick It looks like styled-jsx still adds 2KB gzipped to the build (plus the size of any plugins), doesn't allow the use of CSS preprocessors, and requires some hacks to get syntax highlighting in most code editors. While the technique for scoping does look identical, the implementation still seems quite limited compared to Vue's.

[iammerrick]

👌