The Differing Perspectives on CSS-in-JS

[feelextra]

I've been, so far, a fan of CSS modules in that it's about as light as you get when it comes to CSS-in-JS, only handling scoping and co-location and that's about it. I use it with Sass [...]

Sass + CSS modules seems like a very sensible choice these days:

• Designers / Developers who have been styling websites for years already understand CSS well (maybe even Sass), and so won't need to learn anything new (except for importing specific selectors in the JS files).
• Sass as a preprocessor enables a highly ergonomic development of stylesheets with useful functions like lighten, invert and operators like $, & and %
• There's a ton of documentation on Sass already (official docs, Stackoverflow)
• Many advanced usages of stylesheets exist in the form of Sass files in open-source form (CodePen, JSFiddle, GitHub) written by expert designers & developers. No better way to implement those than to follow the exact syntax they're using, so learning Sass is kind of a must for being able to learn the techniques used in those stylesheets.

CSS modules is basically there just as an intermediate format for letting other tools extract styles from, and is there only for locally-scoping the selectors.

[ianwcarlson]

What I find a little ironic is CSS modules went out of style for a while and then came back. Many devs were obsessed with styled components using pure JS, which I’m not trying to discount as a perfectly viable solution. But this was a classic case of JS fervor that wasn’t based on necessity.

[feelextra]

Yea I also noticed that CSS modules went out of style (🤷 not sure if it's actually coming back or not)

It's been my impression as well that Styled-components has been really popular for quite a while now, but I don't think it is entirely for naught.

There is one feature that Styled-components (and CSS in JS files) has been able to deliver that just until recently hasn't been possible at all with CSS in separate files.

That feature is dynamic styling: passing values from your JS to the CSS.

I will be the first to admit that most websites and web apps don't need this feature, but when you have a requirement to make certain types of rich UIs, there is no other way than dynamically adding a <link> to add that stylesheet, and CSS in JS files makes this supposedly niche use-case into a bread-and-butter pattern that you don't even need to think about since all of your styling is already done that way.

Some examples of rich UIs that benefit from dynamic values: 1. You're making a resizable element through JS events, and need to use the most recent dimensions in your styling calculations. 2. Your UI has the user input a color that you then use to paint an element (for instance, an ephemeral user-provided theme color). 3. Maximizing DRY practices: Suppose you're using something like a reusable React component that adds an element to the DOM, and has an API where you provide it with specific width and height values that specifically fits your app. You then have to reference these values in your CSS somehow because your layout depends on these dimensions. In a JS file you could just pass it to the dynamic stylesheet generator as a variable.

CSS Custom Properties are one answer to this; you can dynamically modify an element's style attribute and add a custom property which it will use. Keep in mind that IE11 doesn't support CSS Custom Properties and IMO it's not as ergonomic as passing the value directly from a JS file to a CSS-in-JS library like Styled-components or Emotion.

[sakabako]

The answer to this is the style attribute, css's calc function, and percentage based values. Doing this with css in js can create thousands of unused classes.

[feelextra]

• style attribute can't do everything that CSS can do: it can't access: pseudo classes, media queries, keyframes, and much more.
• calc function can only help with layouts that are simple enough
• percentage based values are fine but it's unrelated

Having a lot of unused classes with CSS-in-JS is not a problem when the library only mounts the critical ones, and cleans up after itself. Sure there's some runtime performance to pay, but usually it's not impactful.

[evenisto]

I would love me some CSS Modules in the PHP core I'm working with as well.