undefined | Better HN

0 pointstfehring4y ago0 comments

This is really interesting. Assuming I'm willing to trust the author's claim that semantic class names are the reason CSS is hard to maintain, what's the advantage of `<img class="w-32 h-32">` over `<img style="width: 32px; height: 32px;">`?

0 comments

7 comments · 6 top-level

slater4y ago· 1 in thread

Less typing, less bandwidth (ab)used.

tfehringOP4y ago

I'd think the former would typically (depending on how many times the class is re-used) use more bandwidth, if anything, since it still requires the framework to define the `w-32 h-32` class attributes elsewhere using the more verbose identifiers. Plus the overhead for an additional request if that class definition happens in an external style sheet.

code_biologist4y ago

I'm willing to trust the author's claim that semantic class names are the reason CSS is hard to maintain

Here's a great talk on why he asserts that: https://www.youtube.com/watch?v=J_7_mnFSLDg

Not sure I 100% agree, but I appreciate the fresh look at oil patters.

mamcx4y ago

Think is like the most "functional" way to do CSS, in contrast with the "OO" way (like bootstrap).

Each class is applied in pipeline.

And ONLY to that tag. This is key. This leads to know, exactly, what are the effects on each tag, making the UI design very readable.

Then, you can customize it, and have a way to generate a VERY small CSS as result (another big advantage!) because the naming is normalized.

In short: Is the "same" but with more structure, predictability and tooling applied.

The more you need to customize, and the more pain you to "reverse" a CSS made by others, the more this make sense.

tga4y ago

Normally you wouldn't use `w-32` but rather something like `w-8`, that translates to `width: 2rem;`. Same with colors, you would use `bg-red-400`, that happens to translate to `rgba(248, 113, 113)`.

Half of TailwindCSS is a _way_ of using styles, but the other half is almost a theme: a set of margins, paddings, text sizes, colours, etc. that work well together.

mhoad4y ago

I like to think of Tailwind as CSS without the C.

Everything is now all at the same global namespace and all of the issues that people run into with specificity go away in the process.

It’s not my personal choice on how to solve that problem I think shadowDOM via web components are a much nicer option personally but Tailwind has a lot of very enthusiastic fans who seem to enjoy it.

gls2ro4y ago

Media Queries

j / k navigate · click thread line to collapse