Hacker News Reader

Comment by codethief | Hacker News Reader

> I would always add a fallback for a CSS variable, as a defensive CSS approach. You never know what could go wrong. Accounting for that upfront yields more future-proof.

God, I hate CSS. Why can't CSS come with static checks of variable and class names at build time like any other sane language? (Yes, I know there's no build time.) SCSS does solve the variables issue (at least as long as their value is known at build time) but unfortunately I still have no way to ensure my CSS will actually get applied to my DOM elements. So for the tiniest bit of sanity I already need JavaScript/TypeScript and some CSS-in-JS library.

View on HN

> I still have no way to ensure my CSS will actually get applied to my DOM elements. So for the tiniest bit of sanity I already need JavaScript/TypeScript and some CSS-in-JS library.

What do you mean with all this? Valid CSS is applied to matching selectors as soon as they are in DOM. What problem would you like to get solved here?

Yes, but how do you ensure your selectors actually match the DOM elements, beyond testing them manually in the browser? How do you ensure there's not another selector somewhere else in your code base that accidentally overrides the first selector under certain conditions?

I should mention, the above questions are largely driven by my experience of working on large code bases of tens of thousands of lines of CSS, written by dozens if not hundreds of people over the course of a decade. Then again, OP says "You never know what could go wrong." and this precisely matches my feeling whenever I work on some non-trivial CSS, so I don't think I'm the only one struggling with this.

Not the solution you're looking for, probably. But if you hover over your selector in vscode the extension shows the html nested. structure that matches that selector

Thanks! Unfortunately, though, this very much depends on one's overall setup and is not possible in our case. :(

This sounds like an issue with CSS authoring tools, and not CSS itself.

You're asking why it can't do something at build time while also acknowledging that there is no build time? Huh

Reply on news.ycombinator.com