4 ms·

I find writing CSS to be easy enough. The hard parts are tracking latest changes and browser compatibility.

by rascul 9mo ago

shadowgovt 9mo ago
The thing that makes me most anxious about CSS is the lack of composability in the language itself (in the sense that every selector is more-or-less globally applicable). This is both a feature and a bug; it makes it much easier to style the entire site coherently, but at the same time much trickier to release individual modular components of UI as libraries and be able to drop them into the world for consumers to use without those consumers worrying about name collisions in a global symbol space of class names. Web components have helped here, but in practice I don't ever use them; I either use one global style.css file (for personal projects that fit in my brain alone) or I use a system that supports local CSS classes via a compilation-and-name-mangling step.
- WorldMaker 9mo ago
  `@layer` is another recent CSS feature that helps a lot in this space. (I think it's a more exciting feature than Web Components with Shadow DOM.) It makes it easier to stack multiple levels of stylesheets from most generic/system-wide to most specific. You can import 3rd party stylesheets not written for `@layer` in mind into specific named layers. Layers take care of things you'd used to use `!important` to try to hack around much more systematically based on the specificity of the `@layer` the CSS is coming from. (More specific layers override more general ones as if they were more "!important".) Layers don't entirely save you from naming conflicts or CSS specifiers that are too broad, but Dev Tools give you increasing ways to isolate which layer a conflict is coming from, at least, and that can help you decide on ways to fix the conflict. I think `@layer` is a closer hint to what the "CSS-native" approach to "CSS modules" is going to start to be than just CSS class munging at compile time.
- rascul 9mo ago
  > in the sense that every selector is more-or-less globally applicable If I understand what you're saying, that's more about how you use (or don't use) combinators.
TZubiri 9mo ago
If you write code with old features, you don't have to worry about that. It's almost always an inequivocal mistake to use a feature that was released last year.

I find writing CSS to be easy enough. The hard parts are tracking latest changes and browser compatibility.

by rascul 9mo ago

I find writing CSS to be easy enough. The hard parts are tracking latest changes and browser compatibility.

The thing that makes me most anxious about CSS is the lack of composability in the language itself (in the sense that every selector is more-or-less globally applicable). This is both a feature and a bug; it makes it much easier to style the entire site coherently, but at the same time much trickier to release individual modular components of UI as libraries and be able to drop them into the world for consumers to use without those consumers worrying about name collisions in a global symbol space of class names. Web components have helped here, but in practice I don't ever use them; I either use one global style.css file (for personal projects that fit in my brain alone) or I use a system that supports local CSS classes via a compilation-and-name-mangling step.

WorldMaker 9mo ago
`@layer` is another recent CSS feature that helps a lot in this space. (I think it's a more exciting feature than Web Components with Shadow DOM.) It makes it easier to stack multiple levels of stylesheets from most generic/system-wide to most specific. You can import 3rd party stylesheets not written for `@layer` in mind into specific named layers. Layers take care of things you'd used to use `!important` to try to hack around much more systematically based on the specificity of the `@layer` the CSS is coming from. (More specific layers override more general ones as if they were more "!important".) Layers don't entirely save you from naming conflicts or CSS specifiers that are too broad, but Dev Tools give you increasing ways to isolate which layer a conflict is coming from, at least, and that can help you decide on ways to fix the conflict. I think `@layer` is a closer hint to what the "CSS-native" approach to "CSS modules" is going to start to be than just CSS class munging at compile time.
rascul 9mo ago
> in the sense that every selector is more-or-less globally applicable If I understand what you're saying, that's more about how you use (or don't use) combinators.

TZubiri 9mo ago

If you write code with old features, you don't have to worry about that. It's almost always an inequivocal mistake to use a feature that was released last year.