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

111–120 of 211 posts

Re: Tailwind vs. Semantic CSS

#111

Post by sbergot »

HelloNurse wrote: post #68
tipiirai wrote: post #54

Earlier quoted context omitted.

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.

The coupling is in the right direction: designing possibly very advanced CSS to get a desired appearance from a given good markup, instead of compromising markup to simplify CSS.

The issue of this direction is if you need to update the markup, you will need to update the css, which is hard and risky because of css global scoping.

Re: Tailwind vs. Semantic CSS

#112

Post by kaba0 »

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.

Or worse, it breaks at a completely different site you didn’t even touch, won’t notice and might also pass through manual testing (if that’s even a thing at your place), and end up in prod. Sure, there are AI-based testing tools that check for frontend changes, but let’s be honest, they are very rarely used, if at all.

Re: Tailwind vs. Semantic CSS

#113

Post by colourgarden »

Not mentioned in the article:

- Semantic version is not responsive (sure it looks ok but isn't optimised)

- Tailwind version has 13 inlined SVG icons (on the homepage) which increase DOM size (Semantic version has none)

- Tailwind version uses optimised markup for SEO purposes which leads to increased DOM size ( list for navigation; not wrapping entire article summary in an anchor; using structure in work section)

This is clearly not comparing apples with apples when it comes to semantic HTML+CSS vs Tailwind.

However, most egregiously, the author goes on to make a bunch of comparisons between the Next.js tailwindui marketing site and his Nuejs-generated template for the argument that "Tailwind is bad for performance". This is deliberately misleading.

There are plenty of valid criticisms of Tailwind but it's hard not to look at this article as anything but a puff piece for the author's framework rather than a serious comparison of two approaches to building UIs.

Re: Tailwind vs. Semantic CSS

#114

Post by tipiirai »

cal85 wrote: post #93
tipiirai wrote: post #84

Earlier quoted context omitted.

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

You claim that you can only move faster with Tailwind when one of these is true: when you don't care about 'badly structured' CSS, or when you are completely new to CSS, or when you don't care about reusable modules. I care very much about the structure of the CSS files I generate with Tailwind. I have been writing CSS for over 20 years. And I care very much about reusable modules – before good composable component s…

Copy/pasting directly from the article, because you have reworded my claims. Here's what I mean exactly:

---- You can move faster with Tailwind. But only when:

1. You are comparing Tailwind with your earlier, badly structured CSS or you are completely new to CSS development.

2. You don’t care about building reusable modules for later use. That is: you are not naming things that repeat. ----

Re: Tailwind vs. Semantic CSS

#115

Post by Loeffelmann »

tipiirai wrote: post #99
Leimi wrote: post #81

Earlier quoted context omitted.

- 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 quickl…

Tailwind example indeed does more, but only slightly. Would increase the size of CSS by 1-3%. The semantic version has clearly enough to prove the point the article attempts to make: significantly less code is needed and the resulting site is leaner & faster.

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% worth it. Just because something is short doesn't make it better.

Re: Tailwind vs. Semantic CSS

#116

Post by tipiirai »

audessuscest wrote: post #101
tipiirai wrote: post #35

Earlier quoted context omitted.

> that first example is so grotesque It's the actual HTML code in the sites that are compared

I'm pretty sure it's not realistic, there's nothing that justify so many div because of tailwind or the person who developed that with tailwind just love having dozens of div for a simple header > nav > a

> the person who developed that

that person is someone from the Tailwind team. I would expect them to follow their own bst practises on the official template they sell online.

Re: Tailwind vs. Semantic CSS

#117

Post by tipiirai »

Loeffelmann wrote: post #56
tipiirai wrote: post #11

Earlier quoted context omitted.

Extra divs are wrappers that help you style the parent element to add flex layouts for example. Or why do you think the official Tailwind template has so many nested divs with utility classes?

Sure but how would normal css make it so you don't have to use those?

Maybe check out the semantic CSS example using developer console:

https://nuejs.org/@spotlight/

Re: Tailwind vs. Semantic CSS

#118

Post by Timon3 »

bryanrasmussen wrote: post #98
gherkinnn wrote: post #5

This is one of the first Tailwind vs * articles that isn't bad. It makes a good case in the analysis. For a lot of applications (like a blog), what the author calls "semantic CSS" is the right thing to do. But there comes a point at which it is no longer feasible. We have a long history of SMACSS, object oriented CSS, BEM, CSS Modules, scoped CSS, and now Tailwind to make it work. > Because mastering CSS requires pra…

>Similarly, I haven't seen a pattern where good CSS authors do not like Tailwind. well I haven't used Tailwind but from the examples I've seen I would hate it, and from what I can see I would hate it for the same reason that I hate all CSS abstractions I've worked with - because they limit what I can do with CSS in the interest of making it easier for other people who are not that good with CSS to get their work done…

> well I haven't used Tailwind but from the examples I've seen I would hate it, and from what I can see I would hate it for the same reason that I hate all CSS abstractions I've worked with - because they limit what I can do with CSS in the interest of making it easier for other people who are not that good with CSS to get their work done OR it will require me to do things in a particular way when I believe I know a far better way of doing them.

Tailwind explicitly doesn't do this. You can do pretty much everything you'd do with normal CSS. There are a couple of edge cases where you have to add configuration (e.g. if you want specific media queries), but Tailwind doesn't limit you in any way.

I also support the assertion that good CSS authors like Tailwind.

Re: Tailwind vs. Semantic CSS

#119

Post by maciekpaprocki »

This article is a bit bs. the first example of how much code it requires is misleading. you can accomplish this same thing with exactly this same amount of html nodes. You just gonna have more classes.

Calling tailwind tightly coupled Vs semantic loosely coupled is also a bit of strange. I would call it composition over inheritance.

Re: Tailwind vs. Semantic CSS

#120

Post by tipiirai »

jonwinstanley wrote: post #92
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…

Is comparing the markup of an html page with all the style in html attributes, to an html page which imports style from a CSS file (which is not displayed) a fair comparison?

The comparison is exactly that because It's the topic of the article.
Post reply on HN