Comment by torginus | Hacker News Reader

Comment by torginus | Hacker News Reader

Parent Full thread

still, this does not explain, why I should use

class="w-24"

instead of

style="width:24px;"

Other than "inline style bad", when the first one is built into the browser, and a second one requires including an external dependency, that I imagine contains classes w-1 to w-1000 or whatever. Now I strain my IDE-s autocomplete with 1000s of classes, will need a css minifier/bundler (that will at least make my build slower). I'm not a frontend dev, but I do dabble in writing the occasional website, and other than bootstrap (which contains complete styles for stuff like buttons), I never felt the need to use a CSS framework. I get it that in pre-grid days, it was a minor feat of wizardry to implement complex layouts, but nowadays, frameworks seem largely unnecessary to me. Another added benefit of using pure CSS, is you just have to learn it once (with tons of great resources), while with these CSS frameworks, I'll need to learn what everything's called for every framework.

Not sold.

CSS classes can work with media queries while inline styles cannot. A ton of the classes that are generated are screen size variants.

The IDE strain is overblown. There is an official Tailwind plugin for most IDEs and it performs well, even with the massive CSS files you use for development (but are purged/tree-shaken for production). Computers are really good at parsing text, and even at their worst, the CSS files are never more than a MB or two. Even if you enable ever single flag for every token, the dev file size is around 10MB I think. Big to load over the internet, but locally, and being parsed, not a huge problem at all.

There's a section of Wathan's article, "Isn't this just inline styles?" That directly addresses this question. Perhaps you missed it?

> With inline styles, there are no constraints on what values you choose. [With utility classes] you can't just pick any value want; you have to choose from a curated list.

If the list is so long that the whole thing isn't even included by default and you need to custom configure which entries appear on the list, it's not that much better than arbitrary values.

Here's why, media queries:

class="w-24 sm:w-36 md:w-48"

Now I have a nicely designed interface for multiple sizes and it just works.

except that w-24 is not 24px. It's 24 units of whatever your design grid says, so now you can use a design language to describe your layouts instead of absolute dimensions

And for more information on why "24" there isn't just an arbitrary magic number like it was in the original inline style: https://styled-system.com/guides/why-powers-of-two/

Other people have noted that your `style` example isn't responsive, but on top of that, there's nothing stopping you (or a collaborator) from writing `style="width:26px;"` somewhere else in the app. Having a restricted set of options helps enforce consistency across a project and gives you a much nicer look by default. This is especially useful for devs doing frontend work without a strong design background.

This post may clear things up a bit (disclaimer, I wrote it):

"Utility classes vs. inline styles": https://critter.blog/2018/05/04/utility-classes-vs-inline-st...

Reply on news.ycombinator.com