Hacker News Reader

Comment by jfengel | Hacker News Reader

I'm afraid I don't get it either. To me, the big disadvantage of css-in-js is that the browser doesn't display it neatly.

If I write plain CSS, it's easy to make changes right in the browser and have it react instantly. Or I can make them in the .css file, and webpack (or whatever it is) will automatically redisplay them without having to restart the app.

Perhaps if I had much larger projects I'd see more headaches that drives people to css-in-js. But I manage fairly large things and don't have too much grief with plain css.

View on HN

Imagine you need to implement an alternative stylesheet for people with increased visual needs (e.g. high contrast).

How would you go about doing this?

Edit: to the person who downvoted me for asking a question. Classy.

Switch the `<link href="">` value to point to a high contrast stylesheet.

Or alternatively, apply a class to the body tag – e.g. `<body class="high-contrast">` – and declare CSS rules accordingly. Specificity should take care of overriding the 'normal' style rules where needed.

Having to override styles that have random namespace tokens in the class names (via CSS in JS) is going to be difficult.

I'd use CSS variables for colors and write another stylesheet, using the cascade so I only override the styles I need to.

HN randomly mods posts. Don't assume malice.

Could you please explain what you mean?

I think you should assume malice... but reconcile yourself to the fact that there's not much you can do about it. People engage in petty acts of malice on social media because they can get away with it.

The best you can hope for is to forget about it. It's unsatisfying, but less unsatisfying than trying to get back at them or apply "sour grapes" or whatever. None of that works.

The sooner you put your brain on something else, the sooner you'll forget that somebody was a dick to you and got away with it. It sucks, but it's the least worst alternative. Treat it as noise -- which I think is what the OP was trying to say.

I agree re. the assumption; and also the resolution.

I also think it's worth calling it out too though.

New posts get down modded randomly for whatever reason (iirc it was to disrupt some bot karma farming). Wait a day and the post will almost always be back to to the default (1) + any user mods.

This is, what `<link rel="alternate stylesheet" href="contrast.css" title="High contrast">`is for. (Using JS, you can switch between default and alternative stylesheets by setting their "disabled" attribute accordingly.) This mechanism also allows a user to (pre)select a stylesheet in the browser.

Sadly, Chrome doesn't support this standard (it has been around for a while and is in HTML4, HTML Living Standard, CSSOM). But you can work around this by JS, see above.

(Edit: It's for things like this that you still want a menu bar for your browser.)

True, but I'm wondering how the CSS in JS users would implement this.

CSS-in-JS alone doesn't give you many tools for that kind of stuff, but if you use something that integrates more design system-style theming it's pretty easy - have a look at https://chakra-ui.com/ and click on the moon icon in the top corner for instant dark mode. Implementing various themes for high-contrast etc. would just be a case of changing the theme.

You can specify alternative style sheets and even get some standard browser UI:

https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative...

I’ve implemented that two ways: having JavaScript pop the alternative attribute off for all but the desired style sheet or simply using a top-level class to modify the relatively few things we were customizing. Back in the day, I used SCSS but CSS Variables have matured to the point where you can do an awful lot that way, too.

For us the big win is branded sites. We have a white labeled product that is customizable for each client. No code deploys needed to add a new client. Values live in a db table and get pulled in dynamically based on the url subdomain.

Honestly curious, couldn’t you achieve something similar with style sheets, where you determine what .css file to serve based on the subdomain?

Yes, and using CSS Custom Properties/the var() function you can even keep that branding file as small as said table. Could even build it dynamically, if one wanted.

Reply on news.ycombinator.com