Tailwind vs. Semantic CSS

Post by meiraleal » Mon, Oct 23, 2023, 3:28 PM UTC

tipiirai wrote: post #177

meiraleal wrote: post #173

This is a terribly done comparison and as you are the creator of the alternative framework it smells like marketing and intentionally targeting the HN audience. Your example isn't web semantic, isn't accessible, doesn't work in mobile which is from where the biggest audience connect from but you still have the courage to say that "the semantic version is 8 × smaller, renders faster, and is easier to modify and extend…

I have zero regrets/concerns claiming that the semantic version is 8 × smaller, renders faster, and is easier to modify and extend. Tailwind markup is clearly more bloated than semantic one. See: https://nuejs.org/blog/tailwind-vs-semantic-css/img/markup-b... There are many developers who agree with this. Luckily not my lonely fight :) Accessibility (attributes outside "style" and "class") are outside the topic (even…

Post by berkes » Mon, Oct 23, 2023, 3:30 PM UTC

earthnail wrote: post #78

berkes wrote: post #71

Earlier quoted context omitted.

That quickly falls apart when I add an mb-2 to a Thingy, but fail to check that Thingy is also used inside SideThings (which we all forgot existed at all) wich already has whitespace (but somehow uses mt-2 because the developer preferred to declare intermediate whitespace at the top instead of the bottom). So when the communication dept calls me on friday, I add quickly add an #main div.nth-child(2).mb-2 { margin-bot…

Until someone else edits your code and doesn't understand why the layout suddenly broke. nth-child(2) is very prone to this.

Post by tipiirai » Mon, Oct 23, 2023, 3:35 PM UTC

meiraleal wrote: post #181

tipiirai wrote: post #177

Earlier quoted context omitted.

I have zero regrets/concerns claiming that the semantic version is 8 × smaller, renders faster, and is easier to modify and extend. Tailwind markup is clearly more bloated than semantic one. See: https://nuejs.org/blog/tailwind-vs-semantic-css/img/markup-b... There are many developers who agree with this. Luckily not my lonely fight :) Accessibility (attributes outside "style" and "class") are outside the topic (even…

> I have zero regrets/concerns claiming that the semantic version is 8 × smaller, renders faster, and is easier to modify and extend. But you are wrong and your claims are misleading :)

Post by kaba0 » Mon, Oct 23, 2023, 3:51 PM UTC

tipiirai wrote: post #54

sbergot wrote: post #52

Earlier quoted context omitted.

This section is what I am talking about. You compare two methods of writing components and then declare that the tailwind version is tightly coupled but the semantic version is loosely coupled. In programming lingo this means tailwind is bad and semantic is good. But you don't explain why the tailwind version is tightly coupled and the semantic version is loosely coupled. And you don't do it because it is simply not…

So ` ` is loose coupling, because the styling is not coupled directly into the element. You can completely switch the gallery design, by switching (or overriding, or modifying) the external stylesheet.

Post by kaba0 » Mon, Oct 23, 2023, 3:55 PM UTC

tipiirai wrote: post #159

sbergot wrote: post #109

Earlier quoted context omitted.

It is still coupled because the css will need to know the html structure in order to work. If you update the html, you probably need to update the css.

It is _loosely_ coupled. I can switch the design completely without touching HTML. If I modify the HTML structure, the component specification changes and CSS obviously needs to be updated.