4 ms·

Why do you hate utility-css?

by bdr 6y ago

SahAssar 6y ago
It goes against what css and html is supposed to be, it works against the cascade built into the language and it's clearly just a inline css replacement with a new coat of paint (and I don't even like the paint). I could probably go on, but I think that is enough. There were a lot of discussions about this in the thread about tailwindUI here: https://news.ycombinator.com/item?id=22422873 https://news.ycombinator.com/item?id=22422873
- gitgud 6y ago
  > works against the cascade built into the language and it's clearly just a inline css replacement with a new coat of paint (and I don't even like the paint). If that's the only reason, then you should seriously re-evaluate it. [1] You can combine the utilty classes into your own component classes anyway e.g: '.my-button'. The main thing that "utility css" offers is composition over inheritance. You're basically composing small styles to create component styles. You're not overriding the css framework, you're composing your own framework. But it's not for everyone and that's cool too [1] https://tailwindcss.com/docs/extracting-components/#extracting-css-components-with-apply https://tailwindcss.com/docs/extracting-components/#extracti...
  - SahAssar 6y ago
    > You can combine the utilty classes into your own component classes anyway e.g: '.my-button'. Yeah, I heard that argument but in that case I really don't see why I would use it over some well-defined css variables in normal css like this: .btn-blue { background: var(--color-blue); color: var(--color-white); font-weight: bold; padding: 0.5rem 1rem; border-radius: .25rem; } instead of: .btn-blue { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }
    - gitgud 6y ago
      Well, it's probably faster to write (depending on how good your code completion is). Another benefit is that "bg-blue-500" is globally configurable with [1] themes or configuration files. This means you're not hard-coding colors or sizes (although, yes that's possible with plain old CSS too) But what's even faster is simply using the utility classes in your components (it looks messy at first) but its extremely fast to write once you know the syntax of the classes e.g. ".p-xx = padding: xxem". Then all your components encapsulate that messiness and it's easy to change. For example in vuejs, I might make a "btn" component file and style it using Tailwind classes, then the component encapsulates all it's styles but can still be globally configured using tailwind themes. [1] https://tailwindcss.com/docs/theme https://tailwindcss.com/docs/theme
- brtkdotse 6y ago
  > It goes against what css and html is supposed to be Outside of CSS Zen Garden and tiny hobby project, I feel like CSS and HTML _never_ were used as intended. I think the author of TailwindCSS said as much, but I can't find the quote now.

Why do you hate utility-css?

by bdr 6y ago

Why do you hate utility-css?

It goes against what css and html is supposed to be, it works against the cascade built into the language and it's clearly just a inline css replacement with a new coat of paint (and I don't even like the paint). I could probably go on, but I think that is enough. There were a lot of discussions about this in the thread about tailwindUI here: https://news.ycombinator.com/item?id=22422873 https://news.ycombinator.com/item?id=22422873

gitgud 6y ago
> works against the cascade built into the language and it's clearly just a inline css replacement with a new coat of paint (and I don't even like the paint). If that's the only reason, then you should seriously re-evaluate it. [1] You can combine the utilty classes into your own component classes anyway e.g: '.my-button'. The main thing that "utility css" offers is composition over inheritance. You're basically composing small styles to create component styles. You're not overriding the css framework, you're composing your own framework. But it's not for everyone and that's cool too [1] https://tailwindcss.com/docs/extracting-components/#extracting-css-components-with-apply https://tailwindcss.com/docs/extracting-components/#extracti...
- SahAssar 6y ago
  > You can combine the utilty classes into your own component classes anyway e.g: '.my-button'. Yeah, I heard that argument but in that case I really don't see why I would use it over some well-defined css variables in normal css like this: .btn-blue { background: var(--color-blue); color: var(--color-white); font-weight: bold; padding: 0.5rem 1rem; border-radius: .25rem; } instead of: .btn-blue { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }
  - gitgud 6y ago
    Well, it's probably faster to write (depending on how good your code completion is). Another benefit is that "bg-blue-500" is globally configurable with [1] themes or configuration files. This means you're not hard-coding colors or sizes (although, yes that's possible with plain old CSS too) But what's even faster is simply using the utility classes in your components (it looks messy at first) but its extremely fast to write once you know the syntax of the classes e.g. ".p-xx = padding: xxem". Then all your components encapsulate that messiness and it's easy to change. For example in vuejs, I might make a "btn" component file and style it using Tailwind classes, then the component encapsulates all it's styles but can still be globally configured using tailwind themes. [1] https://tailwindcss.com/docs/theme https://tailwindcss.com/docs/theme
brtkdotse 6y ago
> It goes against what css and html is supposed to be Outside of CSS Zen Garden and tiny hobby project, I feel like CSS and HTML _never_ were used as intended. I think the author of TailwindCSS said as much, but I can't find the quote now.