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

171–180 of 211 posts

Re: Tailwind vs. Semantic CSS

#171

Post by kissgyorgy »

tipiirai wrote: post #135
Loeffelmann wrote: post #115

Earlier quoted context omitted.

If you really want to compare code snippet sizes, you must offer the same functionality. Otherwise, the comparison is meaningless. You did the exact same thing before when you compared the Headless UI combobox with your nue.js implementation. Offering fewer features will result in less code. Shocker. Besides, I don't really care for these comparisons. If something is 2x longer code but more maintainable, it is 100% w…

I'm sure most developers can see the bigger picture with a 95-99% a implementation.

You are underestimating the effort/size spent on the last 5% of a project.

Re: Tailwind vs. Semantic CSS

#172

Post by thinkxl »

The article focus on the semantics of CSS classes present in the HTML rendered in the browser, but the example the author presents doesn't have a good semantic HTML.

The template the author is comparing against (https://spotlight.tailwindui.com/) has better HTML structure, descriptive text and aria labels on buttons, icons and images. This is what the semantic web is about.

You could argue that the author's template loads faster (not for that much honestly) but the UX won't be better.

Tailwind or Bootstrap's (just to provide an additional example) documentation presents accessible and well styled patterns that end users will benefit from.

People complain about the bloat of these frameworks, but they don't make a fair comparison when checking examples for accessibility, responsiveness (mobile experience) and other features that make a great UX and help with SEO (because in the end accessibility is SEO).

Re: Tailwind vs. Semantic CSS

#173

Post by meiraleal »

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."

Like your past posts about Nuejs, you discuss on this post with the same arrogance as if everybody is wrong, you are right. But then you always fail to convince anybody that your idea is good enough, like NueJS reactivity that is a copy of the (now ditched) svelte approach.

Re: Tailwind vs. Semantic CSS

#174

Post by tipiirai »

thinkxl wrote: post #172

The article focus on the semantics of CSS classes present in the HTML rendered in the browser, but the example the author presents doesn't have a good semantic HTML. The template the author is comparing against ( https://spotlight.tailwindui.com/ ) has better HTML structure, descriptive text and aria labels on buttons, icons and images. This is what the semantic web is about. You could argue that the author's templat…

The article focuses on Tailwind CSS vs Semantic CSS. HTML attributes, beside "class" and "style" are outside the scope. Both approaches are equally good: there is nothing extra that Tailwind provides for making websites more accessible.

Re: Tailwind vs. Semantic CSS

#175

Post by mpeg »

porridgeraisin wrote: post #151

It's quite simple in my view. The "separate markup and styling" paradigm with shared css will lead to refactors having a large blast radius. When you've organised your team by mapping people -> features(components), this makes this paradigm completely unviable. Tailwind wins there, that's it. For web apps, having separate markup and styling makes absolutely zero sense, while it does for textual, reading content like…

Using semantic css doesn't always mean your markup and styling are separate.

There are plenty of modern frameworks nowadays that use single file components (pretty much every popular framework except react?) and often you even choose to scope the css to one component only, if you want.

Re: Tailwind vs. Semantic CSS

#176

Post by ess3 »

I’m still looking for a lightweight solution (no react etc) that lets me write normal CSS but scoping it to an arbitrary part of my HTML tree. Most of the time I’ll be working in a partial where I know what generic names such as .container refers to And I don’t want to bother with coming up with unique names.

The best I can think of is to use descendant selectors but that increases the specificity and is hard to maintain imo.

Excited to see what the @scope feature draft can bring to this

Re: Tailwind vs. Semantic CSS

#177

Post by tipiirai »

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 though both sites give accessibility score in the same ballpark).

Re: Tailwind vs. Semantic CSS

#178

Post by thinkxl »

tipiirai wrote: post #174
thinkxl wrote: post #172

The article focus on the semantics of CSS classes present in the HTML rendered in the browser, but the example the author presents doesn't have a good semantic HTML. The template the author is comparing against ( https://spotlight.tailwindui.com/ ) has better HTML structure, descriptive text and aria labels on buttons, icons and images. This is what the semantic web is about. You could argue that the author's templat…

The article focuses on Tailwind CSS vs Semantic CSS . HTML attributes, beside "class" and "style" are outside the scope. Both approaches are equally good: there is nothing extra that Tailwind provides for making websites more accessible.

It's an unfair comparison because Tailwind as a library is composed of tooling, documentation, design patterns, good practices and obviously CSS. The same is for other libraries, e.g., Bootstrap.

I agree that using Tailwind--without extra effort--will end up with "meaningless" (not really) classes in the HTML.

But semantics should be prioritized in HTML rather than CSS or class names. What's the benefit of having semantic classes when your HTML is inaccessible and unsemantic? e.g., using `a` instead of `button`, `img` with unsemantic alternative text.

Re: Tailwind vs. Semantic CSS

#179

Post by flashgordon »

ess3 wrote: post #176

I’m still looking for a lightweight solution (no react etc) that lets me write normal CSS but scoping it to an arbitrary part of my HTML tree. Most of the time I’ll be working in a partial where I know what generic names such as .container refers to And I don’t want to bother with coming up with unique names. The best I can think of is to use descendant selectors but that increases the specificity and is hard to main…

I am currently undoing nextjs out of a side project (where I spent 2 months learning react/next as it seemed like everyone knew something I didn't). I think I got pretty good at it and frankly the only useful thing I get about is it were - I think you referred to as - "isolated css". Frankly I found the whole shebang way too complicated and bloated and just was not worth being stuck to Node as a backend (I am fairly comfortable (dare I say formidable) with golang and don't see a need - for me - to switch.

On fe html/Templates+webpack (scss for variables and typescript) has taken me very far with a clean and fast build step and more importantly dependencies don't break every few months!

One downside though is remembering why a particular "css" after a while. But i am not a particularly fe/styling person so my css is simple. May tailwind is for the Uber fe/design crowd!

Re: Tailwind vs. Semantic CSS

#180

Post by tipiirai »

ess3 wrote: post #176

I’m still looking for a lightweight solution (no react etc) that lets me write normal CSS but scoping it to an arbitrary part of my HTML tree. Most of the time I’ll be working in a partial where I know what generic names such as .container refers to And I don’t want to bother with coming up with unique names. The best I can think of is to use descendant selectors but that increases the specificity and is hard to main…

Me too. Unfortunately the browser support for @scope is very low atm. Cascade layers are one way to decrease specifity and are well supported [1].

[1]: https://caniuse.com/css-cascade-layers

Post reply on HN