While Styled Components, Styled JSX or Linaria (which doesn't require a JS runtime for production) are nice solutions, the fact that I can no longer use the colour picker and other tools to live edit CSS from the styles pane in the Elements tab in Chrome Dev Tools, sometimes makes me want to go back to plain CSS to get this functionality back.
Why I Write CSS in JavaScript
11–20 of 255 posts
Re: Why I Write CSS in JavaScript
#12CSS in JS is one place where Vue has a substantially better experience. Being able to toss scoped-css, written as normal in a css block is what I call nailing the developer experience. It is all the best parts of css in js with none of the downsides.
Re: Why I Write CSS in JavaScript
#13Author here, happy to respond to any questions. AMA!
How do you plan to accommodate NoScript users?
NoScript users are almost always economically irrelevant to the business posting the page. They tend to be extra aggressive blockers of ads (and therefore ad revenue) and are sufficiently far from the center of the bell curve technologically that they are both a tiny minority and their product needs and wants tend to be edge cases that are not economically efficient for the business to pursue. I get why NoScript users want to run NoScript, but it's the most powerful signal a web visitor can provide a business to say "focus your resources on the needs of others ahead of mine."
Re: Why I Write CSS in JavaScript
#14The problem with orphan CSS is adressed very intuitively in Vue.js with single file components (HTML + JavaScript + CSS).
Re: Why I Write CSS in JavaScript
#15Earlier quoted context omitted.
How do you plan to accommodate NoScript users?
I know this will be unpopular, but after a certain point, noscript users just get a bad experience and that can't be helped. If a developer wants to provide a rich experience, then there will always be certain platform requirements. Without them, you will have a lacklustre experience. It's like saying "I want to have all the whizzy functionality of your app, but I want to access it using a standard, run of the mill,…
[deleted]
Re: Why I Write CSS in JavaScript
#16Author here, happy to respond to any questions. AMA!
Can you say how this affects the classes and ids you add? I'm guessing you use classes and IDs a lot less because you don't need things to match the css against?
Re: Why I Write CSS in JavaScript
#17How do you handle advanced CSS Level 3/4 selectors, CSS grid, and media queries?
Re: Why I Write CSS in JavaScript
#18Author here, happy to respond to any questions. AMA!
How do you plan to accommodate NoScript users?
React apps have to be deliberately engineered to work without JS at all, via server rendering. Assuming that's done though, the CSS in JS can just be server rendered too.
It's rather easy too if you're using a (great) library like styled components - this functionality is built in and just works with a couple of extra lines of code.
The deeper question here is will the app work at all without JS. That's quite hard to achieve (every client side interaction must have a server rendered equivalent accessible via a url or url params, essentially) but the CSS part is easy.
Re: Why I Write CSS in JavaScript
#19I understand the "pit of success" idea, particularly when it comes to more junior devs. But I don't necessarily agree that you need stringent processes to get most of the gains you cite from using something like SCSS or even regular CSS these days. It's really easier than ever.
1- append only? No, each module/feature/widget gets its own CSS file, imported to the main app CSS file. Delete the widget? Delete the file.
2- Specificity issues? Never use IDs, stop using tag names and simple classes and adopt a simple naming structure (doesn't have to be BEM, it could literally be ".widgetName-header")
Since I adopted those 2, I've almost never had dead CSS from deleting features or collisions in my CSS. I do still have a small base set of styles that are shared but it's small enough to be easily manageable.
3- dynamic properties? CSS variables. Not an option? Child classes that apply the dynamic styles serve most use cases. Truly dynamic styles are rare, in my experience.
I'm still keeping an open mind about the possibilities, but my strong opinion (weakly held) is that I still don't see CSS-in-JS as more of a bandaid for people that like CSS and (for many, not all) those that don't have an in-depth understanding of it.
Re: Why I Write CSS in JavaScript
#20Author here, happy to respond to any questions. AMA!
How do you plan to accommodate NoScript users?
The only reason I know of to bother supporting NoScript users is so that when you announce your site on Hacker News you don't have to read that one angry privacy guy talking about how bloated your site is because it requires 200 KB of JS.