Hacker News new | ask | show | jobs
by christophilus 35 days ago
With CSS names are global. You have to be careful not to accidentally create a class that conflicts with another one used elsewhere in a different context. You have to worry about whether modifying your class will have downstream effects on elements you weren’t intending to impact. It’s a giant pain. I’ve done it by hand for around 20 years before switching to Tailwind.

Can vanilla CSS be used for a complex app? Yes. But, it takes discipline, and I only have a limited amount of that. I’d rather spend my discipline budget on other things.

That said, nested selectors and CSS variables have gone a long way towards making the vanilla experience much more pleasant. I may have to give it a shot on a side project one of these days.
5 comments
yawaramin 35 days ago
> With CSS names are global.

Not necessarily. Nested selectors make it pretty easy to apply styles in a modularized way. See https://rstacruz.github.io/rscss/

link
alwillis 33 days ago
> With CSS names are global.

You can limit selectors (not custom properties) to a subtree by using @scope.

On the horizon is @function [1] where custom properties can be local to the function.

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/A...

link
the_other 35 days ago
> With CSS names are global.

In your "programmatic" code (your JS/TS, python, C++, whatever..) your classes are global. Even if the language supports flexible namespaces, or module scoping, you still have to take great care naming because reusing a name will cause you confusion. Giving two things the same name makes them harder to import, and risks clashes and bugs.

No-one complains about this. This is just how you code in all those other languages.

link
jakelazaroff 35 days ago
In "programmatic" code, declaring two classes with the same name in the same namespace is generally either some sort of syntax error or one will "shadow" the other; it doesn't just silently merge the behavior of both classes.
link
the_other 34 days ago
TypeScript interfaces just merge. You can aet any property name you like on a plain JS object, at any time.

The CSS version is a risk, for sure. The dev tools in all the main browsers will tell you where the extension happens and show yiu the order the complecting rules are applied, so it’s fairly easy to debug. Bugs/misbehaving code is usually a problem of structure. In other languages, we take on the need to apply structure; just do the same with CSS.

The mechanism that allows this merging behavior is the means by which intentional reuse is composed. It allows yiu to set general and specific rules sets. This seems conceptually similar to OO classes and subclasses, to me.

link
4rt 33 days ago
the 'silent merging' you're talking about is the c in css
link
bobthepanda 35 days ago
Modules make the global thing less of a concern these days.
link
1shooner 35 days ago
This is (imo) the most valid argument for Tailwind: the UI semantics of "hero" "card" etc aren't put in CSS, they're put in the module. Modules are typically designed for this encapsulation, and CSS was not.
link
bobthepanda 35 days ago
when i say css modules i mean something more akin to https://css-tricks.com/css-modules-part-1-need/
link
atoav 34 days ago
> You have to be careful not to accidentally create a class that conflicts with another one used elsewhere in a different context.

Has your tried using the cascading part of the language?

link
joquarky 34 days ago
Unless you're duct taping together a wide variety of kitchen sink dependencies, namespace shouldn't be a problem.
link