4 ms·

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 advant

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;">`?

mhoad 5y 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.
gls2ro 5y ago
Media Queries
slater 5y ago
Less typing, less bandwidth (ab)used.
- tfehring 5y 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_biologist 5y 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 https://www.youtube.com/watch?v=J_7_mnFSLDg Not sure I 100% agree, but I appreciate the fresh look at oil patters.
tga 5y 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.
mamcx 5y 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.

mhoad 5y 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.

gls2ro 5y ago

Media Queries

slater 5y ago

Less typing, less bandwidth (ab)used.

tfehring 5y 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_biologist 5y 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 https://www.youtube.com/watch?v=J_7_mnFSLDg Not sure I 100% agree, but I appreciate the fresh look at oil patters.

tga 5y 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.

mamcx 5y 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.