Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tailwind vs. Semantic CSS

nuejs.org

Post reply on HN
Print view View original

81–90 of 211 posts

Re: Tailwind vs. Semantic CSS

#81

Post by Leimi »

tipiirai wrote: post #66
Leimi wrote: post #62

The article is interesting but really feels unfair sometimes, it doesn't help: - The whole "amount of CSS" part is unfair when the Semantic CSS implementation isn't responsive at all, so of course it will be lighter, it does less. - The part about the big number of HTML elements is a bit frustrating too; tailwind doesn't require you to use more HTML tags at all. It's totally possible to redo the Semantic CSS example…

Author here: - How is it not responsive? I can easily fix. - The Tailwind example is the official template made by the Tailwind developers themselves.

- compare the tailwind example and yours, they don't have the same behavior. The tailwind one has a specific mobile menu for example. And that is just one example.

- sure, but since the tailwind page does more things, it's logical it has more code. Your base for comparison is production used code, sold to people. So of course it's polished, it must handle browser bugs and other things you might not expect in a quickly implemented alternative for a tech article. So I'm not surprised the code is bigger. That doesn't say at all that tailwind == more HTML tags :)

Re: Tailwind vs. Semantic CSS

#82

Post by tipiirai »

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.

You can see this in practise here:

https://nuejs.org/@spotlight/

vs here:

https://nuejs.org/@base/

(the gallery component)

Re: Tailwind vs. Semantic CSS

#83

Post by throwawake »

I think tailwind is like a drug for css developers which gives them power but takes something away. They've successfully convinced people to think the tailwind way and not beyond to the extent that we use absurd classes to keep overselves in html. It's cleaver but not simple. I still miss the days when I was able to quickly turn a design into html but now I struggle and search for my tailwind drug.

Re: Tailwind vs. Semantic CSS

#84

Post by tipiirai »

cal85 wrote: post #69

This article makes some bold, false claims. What is true is that Tailwind will generally result in a bigger stylesheet over the wire than if you hand-write CSS. That's a well understood trade-off, made in exchange for several benefits. But then the article suggests that every claimed benefit of Tailwind actually doesn't exist, and that Tailwind is in fact worse on all fronts. He seems genuinely to believe that there…

Author here. Please specify a falsy claim on the article and we can talk about it.

Re: Tailwind vs. Semantic CSS

#85

Post by jongjong »

This perfectly summarizes what I've been saying. Popular tools are not the most effective ones. The people who are leading our current tech monoculture are not qualified to be making such decisions and imposing them on such large numbers of people. The artificiality of our current tech culture is obvious. It doesn't feel organic, not free market.

Re: Tailwind vs. Semantic CSS

#86

Post by tipiirai »

twohaibei wrote: post #70
tipiirai wrote: post #41

Earlier quoted context omitted.

1. Only tested with a handful of browsers and devices 2. I did not optimize the Tailwind version. The Tailwind developers did. 3. I have no idea. I only did the semantic version. It was quick, because I have done so much CSS in my life 4. You can check that out yourself. Both sites are brotli compressed

4. I just checked. Its 12kB vs 4kB. But tailwind/nextjs version has a lot of files incluced (ie. svg icons) which the other extracted to separate files. Also, nextjs adds its own code that is completely unnecessary. Such as, 15 reponsive versions of the same image file, script tags at the end with the whole content in json. This comparison does not feel objective (or honest) at all to me. If you want to prove to prof…

True. There is some unnecessary next.js clutter in there, which I'll address on my next post. Removing that would make the HTML leaner. Likewise, removing the inline CSS from the semantic version would make it leaner.

Re: Tailwind vs. Semantic CSS

#88

Post by arzke »

willdr wrote: post #76
ekzy wrote: post #23

In my experience, it isn't black or white. I've used tailwind along with components, e.g. .button-primary { @apply rounded-full focus:ring focus:ring-orange-500 ring-offset-4 outline-none px-6 py-3 etc... and it gives you the best of both worlds. You refactor common css code into components and still have the amazing flexibility of utility classes.

This is not the best of both worlds. This is an antipattern and discouraged by the Tailwind core team and the Tailwind community at large.

Actually, the docs says it's perfectly fine to use @apply for highly reusable components like buttons and form controls: https://tailwindcss.com/docs/reusing-styles#avoiding-prematu...

Re: Tailwind vs. Semantic CSS

#89

Post by jonwinstanley »

jongjong wrote: post #85

This perfectly summarizes what I've been saying. Popular tools are not the most effective ones. The people who are leading our current tech monoculture are not qualified to be making such decisions and imposing them on such large numbers of people. The artificiality of our current tech culture is obvious. It doesn't feel organic, not free market.

Presumably tools only get popular if people find them useful though? As in, if no-one saw value in them then no-one would use them?

Re: Tailwind vs. Semantic CSS

#90

Post by rhdunn »

vbezhenar wrote: post #44

So given the popularity of tailwind I can conclude with confidence, that semantic movement has failed. HTML does not need semantics (because every big site is absolutely filled with divs) and CSS does not need semantics either. Spending time thinking about semantics is wasting time.

It will depend on what templating framework the websites are using. Server-side rendering frameworks can allow users to write semantic components -- e.g. `` -- that get expanded to HTML markup, which will often be realized as many divs.

This is often necessary to be able to properly style things like select controls or create more complex UI/markup.

Tailwind is useful in this case, or with things like react and vue where the layout can be specified once in the component templates. If hand-writing the classes, the semantic model makes sense as it allows you to remain consistent in what styles get applied.

Post reply on HN