3 ms·

If you compare a given snapshot of code containing utility css vs well defined CSS, then yes, it looks worst. The reality is that if the codebase and style cod

If you compare a given snapshot of code containing utility css vs well defined CSS, then yes, it looks worst. The reality is that if the codebase and style code is in flux, that idealized CSS stylesheet will churn towards a being a mess of tech debt. Utility CSS contain redundancies (on the HTML side of things), but the rule of dumb is that you shouldn't refactor redundancies until you are absolutely sure what the unit of abstraction / isolation should be. In the case of prototype and fleshing out your designs, having a concise CSS stylesheet won't work, especially if you work with other people who are tunnel visioned on one specific scenario (a sort of tragedy of the commons) and not thinking hollistically as you would as an solo developer. We can think of that idealized, perfectly concise, stylesheet an "unstable saddle point" whereas utility CSS is not already at the saddle point but it does converge towards a stable one.

nailer 4y ago
> The reality is that if the codebase and style code is in flux, that idealized CSS stylesheet will churn towards a being a mess of tech debt. Interesting. That’s not been my experience. People tend to clean up as they go, eg if the design says we now need a thinner padding / gaps or a different colour blue, we change the variable, and if we spot cut and pastes we fix them. It’s certainly much easier to refactor than visual classes mixed into HTML.
- _v7gu 4y ago
  But tailwind also provides a way to change variables? https://tailwindcss.com/docs/customizing-spacing https://tailwindcss.com/docs/customizing-spacing Better yet, it also forces people to use theme spacing sizes or making the use of custom unit very explicit (a [] in your class name)
  - nailer 4y ago
    Tailwind doesn’t force people to do anything more than using regular CSS does. Or any technology - it’s really difficult to change human behaviour with technology.
- Kiro 4y ago
  What you describe is not representative of how CSS is maintained in most companies. You always end up in a situation where it's impossible to track down what styles affect what elements so you start overriding and duplicating because you're afraid to touch existing CSS.
  - nicoburns 4y ago
    How can it ever be impossible to track down styles? The browser dev tools will tel you exactly which styles apply to which element.
    - Kiro 4y ago
      Nothing is impossible but it becomes hard because the element is styled through multiple cascades, and you need to track it down both ways. When changing a class or a style you need to know what elements that change affects, which will be hard to track down because of the same reasons.
    - deleted 4y ago
      [deleted]
    - kaba0 4y ago
      Come on, do you honestly gonna tell people that just because a Turing-machine somehow managed to untangle that mess, it is humanly parsable? Most sites are not HN with like 3 lines of CSS, dev tools will list you like 10s of different rulesets that together determine the output — of course one can see what’s the end result, but now try changing some property that gets applied by multiple rules. That can get very difficult/impossible since you may not have control over every stylesheet.
  - nailer 4y ago
    Svelte, which is fairly mainstream these days looking at state of js, scopes your styles to the component. So global styles are very rare and usually a bunch of branding variables these days. Like a lot of bad solutions in tech, tailwind seems to exist as a workaround to the core issue of ‘still using react’.

nailer 4y ago

> The reality is that if the codebase and style code is in flux, that idealized CSS stylesheet will churn towards a being a mess of tech debt. Interesting. That’s not been my experience. People tend to clean up as they go, eg if the design says we now need a thinner padding / gaps or a different colour blue, we change the variable, and if we spot cut and pastes we fix them. It’s certainly much easier to refactor than visual classes mixed into HTML.

_v7gu 4y ago
But tailwind also provides a way to change variables? https://tailwindcss.com/docs/customizing-spacing https://tailwindcss.com/docs/customizing-spacing Better yet, it also forces people to use theme spacing sizes or making the use of custom unit very explicit (a [] in your class name)
- nailer 4y ago
  Tailwind doesn’t force people to do anything more than using regular CSS does. Or any technology - it’s really difficult to change human behaviour with technology.
Kiro 4y ago
What you describe is not representative of how CSS is maintained in most companies. You always end up in a situation where it's impossible to track down what styles affect what elements so you start overriding and duplicating because you're afraid to touch existing CSS.
- nicoburns 4y ago
  How can it ever be impossible to track down styles? The browser dev tools will tel you exactly which styles apply to which element.
  - Kiro 4y ago
    Nothing is impossible but it becomes hard because the element is styled through multiple cascades, and you need to track it down both ways. When changing a class or a style you need to know what elements that change affects, which will be hard to track down because of the same reasons.
  - deleted 4y ago
    [deleted]
  - kaba0 4y ago
    Come on, do you honestly gonna tell people that just because a Turing-machine somehow managed to untangle that mess, it is humanly parsable? Most sites are not HN with like 3 lines of CSS, dev tools will list you like 10s of different rulesets that together determine the output — of course one can see what’s the end result, but now try changing some property that gets applied by multiple rules. That can get very difficult/impossible since you may not have control over every stylesheet.
- nailer 4y ago
  Svelte, which is fairly mainstream these days looking at state of js, scopes your styles to the component. So global styles are very rare and usually a bunch of branding variables these days. Like a lot of bad solutions in tech, tailwind seems to exist as a workaround to the core issue of ‘still using react’.