3 ms·

Global styles are like global state in software: They're best avoided.

by codethief 5mo ago

xigoi 5mo ago
Global state is bad because it’s mutable. Global styles are not mutable.
- IceDane 5mo ago
  No.. that's not the only reason. Global state is bad because it makes it hard to reason about your system. The global state can affect any part of it, or, focusing on the inverse which is probably better applied to global styles, any part of your system can depend on the global state. It's also weird to say "global styles are not mutable" - you're right, they're (generally) not mutable, at runtime. But they are mutable in the sense that your developers (you, or your colleagues, or someone in 3 years maintaining your code) can mutate them, and if large parts of your system are implicitly dependent on the CSS cascading properly and so on, then those changes can have unintended consequences. Of course, that can also apply to tailwind, to some extent. A developer can change a class (custom or otherwise) or the configuration - but at least it is very clear what is being changed and what parts will be affected (just grep).
  - zelphirkalt 5mo ago
    With CSS unintended consequences are always problems of scoping things better. If I give semantically meaningful CSS classes to my semantic HTML and scope my rules to apply to their intended place in the pages, then unintended consequences don't happen. If I roll like: "Oh, I want this list to look differently, lets make a global scope ul/ol style!" then I am asking for trouble later on. When I write a CSS rule, I should always be thinking about the scope and whether my rules are truly something universally applicable to that scope.
- rtpg 5mo ago
  Global styling done messily can override local styling. It’s the hardest kind of problem to reason about! I do think that stuff like bootstrap is generally good at avoiding this but it only takes a handful of improperly scoped high level CSS rules to cause awkward hard-to-fix pain much later on.
  - skydhash 5mo ago
    Learn how cascading works, then learn how to use the web inspector. I'm using Firefox and the style panel list the the selectors used in order of priority. And you can filter by properties to see which one is overriding everything else (i.e the only one not crossed out).
Sankozi 5mo ago
So no CSS files at all? Only inline styles?
- arealaccount 5mo ago
  Well I mean styles that are actually global I put into CSS, but it’s generally not too much
- codethief 5mo ago
  No, you just need to scope your styles appropriately. See also my other comment: https://news.ycombinator.com/item?id=48161902 https://news.ycombinator.com/item?id=48161902
slashdave 5mo ago
Says the engineer and not the designer
- codethief 5mo ago
  What does the designer say?

Global styles are like global state in software: They're best avoided.

xigoi 5mo ago

Global state is bad because it’s mutable. Global styles are not mutable.

IceDane 5mo ago
No.. that's not the only reason. Global state is bad because it makes it hard to reason about your system. The global state can affect any part of it, or, focusing on the inverse which is probably better applied to global styles, any part of your system can depend on the global state. It's also weird to say "global styles are not mutable" - you're right, they're (generally) not mutable, at runtime. But they are mutable in the sense that your developers (you, or your colleagues, or someone in 3 years maintaining your code) can mutate them, and if large parts of your system are implicitly dependent on the CSS cascading properly and so on, then those changes can have unintended consequences. Of course, that can also apply to tailwind, to some extent. A developer can change a class (custom or otherwise) or the configuration - but at least it is very clear what is being changed and what parts will be affected (just grep).
- zelphirkalt 5mo ago
  With CSS unintended consequences are always problems of scoping things better. If I give semantically meaningful CSS classes to my semantic HTML and scope my rules to apply to their intended place in the pages, then unintended consequences don't happen. If I roll like: "Oh, I want this list to look differently, lets make a global scope ul/ol style!" then I am asking for trouble later on. When I write a CSS rule, I should always be thinking about the scope and whether my rules are truly something universally applicable to that scope.
rtpg 5mo ago
Global styling done messily can override local styling. It’s the hardest kind of problem to reason about! I do think that stuff like bootstrap is generally good at avoiding this but it only takes a handful of improperly scoped high level CSS rules to cause awkward hard-to-fix pain much later on.
- skydhash 5mo ago
  Learn how cascading works, then learn how to use the web inspector. I'm using Firefox and the style panel list the the selectors used in order of priority. And you can filter by properties to see which one is overriding everything else (i.e the only one not crossed out).

Sankozi 5mo ago

So no CSS files at all? Only inline styles?

arealaccount 5mo ago
Well I mean styles that are actually global I put into CSS, but it’s generally not too much
codethief 5mo ago
No, you just need to scope your styles appropriately. See also my other comment: https://news.ycombinator.com/item?id=48161902 https://news.ycombinator.com/item?id=48161902

slashdave 5mo ago

Says the engineer and not the designer

codethief 5mo ago
What does the designer say?