Live data from Hacker News

Tailwind vs. Semantic CSS

nuejs.org

191–200 of 211 posts

Re: Tailwind vs. Semantic CSS

#191
post #79

Earlier quoted context omitted.

Hello, well done on your article! I have a few questions: - What exactly do you mean by "Semantic CSS"? I've never heard this terminology before (might just be OOTL). I get the parallel between this and Semantic HTML, but I guess it's not as clear what it is supposed to mean for a styling language to me. Is it just native CSS (or "pure" CSS)? At least, as a result, I have no idea what this means, or by what measures…

Thanks! Semantic CSS describes an elements meaning clearly: like , , or . Tailwind is non-semantic because you cannot say what the element does, like for example: The links are now fixed. Thanks!

It tells exactly that it is a link.

Re: Tailwind vs. Semantic CSS

#192
post #175

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.

Tailwind is not worse in this case either, and one might argue the “cascading” part of CSS is useless on such a local scope.

Also, tailwind gives you a pragmatic, limited selection of sizes, colors, etc, which is a very good basis for designing. (You shouldn’t be using a new px value for everything, they should come from a small custom-chosen set)

Re: Tailwind vs. Semantic CSS

#193
post #190

Earlier quoted context omitted.

Indeed! I'm a freak using CSS as intended :)

The problem is that CSS’s intended usage is broken, and never lived up to expectations.

I think CSS does a good job at separating structure from presentation. Or what do you think was the original intention? Do you think Tailwind fixed the core issue with CSS?

Re: Tailwind vs. Semantic CSS

#194

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.

You will be more effective if you deploy your words more carefully.

Loose coupling vs tight coupling has an established meaning ≈ “if a change to module X causes a failure in module Y, then we say X and Y are tightly coupled.” This has some “knock-on” effects that you are trying to gesture at, like, “If two modules are tightly coupled then because of that tight coupling we usually have to coordinate deployments between them both.” And then you're like “I can ship new CSS without having to coordinate a deployment of HTML, that must be loose coupling then!”

But this is a sloppy way to use the language, because in the one case you have one module, and in the other case you have two: there is no coupling in the Tailwind case because there is nothing to be coupled because it all ships as one module, then you construct a more modular approach, one with two modules in fact, and these modules are (depending on how you squint at it given that we are doing decorative programming and there are no explicit errors) in fact “tightly coupled”—the semantic HTML essentially provides a customized API which the CSS uses by hooking into; this is a common form of tight coupling in microservice deployments for example.[1]

So you are actually looking at, one module plus a static asset that defines a common language, vs. two modules that are tightly coupled, and declaring that the two modules are “more loosely coupled” and this is somewhat of a nonsense thing to say. Like I get what you were going for, I didn't write this as a top level complaint because I understand what you meant, but here in the thicket of comments I see that you are not communicating well with your interlocutor because of this sloppiness and language, you might want to pivot?

[1] This point about microservices is likely to outrage a random passerby, look I am sure that your microservices use RPCs against HTTP APIs in a way that doesn't cause you much grief in having to update multiple modules in one commit (if monorepo) or stage “topics” (Gerrit’s term) where you carefully have to merge 2 or 3 pull requests to different repositories all at the same time (if multi-repo). But even though your microservices are loosely coupled, I have worked on very similar architectures where we did have to stage topics and if you didn't then changes to service X would break service Y, “We’ll ship a new value for this enum, that requires changing the common schema repo, which requires updating every microservice that looks at that enum so that it doesn't have a deserialization failure ‘this is not an allowed value for that enum’ when the new values start rolling out, the ones that actually switch() or if() on that enum need to be updated to do the right thing, oh, I missed one because it relies on the contract that if enum == x then fieldA is set but if enum == y or z then fieldB is set but now when enum == q neither fieldA nor fieldB is set...” and I am happy that you haven't had these problems but yeah, some microservices are tightly coupled by this definition.

Re: Tailwind vs. Semantic CSS

#195

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.

I sugest you look for the bigger picture on the article and the baggage you get when using Tailwind.

Dude, I am sorry, but almost every example has something wrong.

First of all you are not comparing tailwind css vs semantic css. You are comparing tailwind ui implementation of a page vs your implementation.

You are comparing blog projects with very small amount of components. It's misleading, as good naming is only easy on small amount of components. This same goes for styling based on html element selectors vs classes.

The button example is just shameful. Half of the classes there don't make sense, and you are not showing your css at all.

This is how button would look https://play.tailwindcss.com/FHIFtYbrV8 .

The speed is also misleading. Most of the comparison there is next vs nuejs. In fact, you could probably do that without any js and have even better results.

The thing is that neujs itself sounds pretty good as I really believe progressive enhancement being the way, but comparisons on your site are also misleading.

Like this thing https://nuejs.org/compare/component.html that only says that it doesn't implement this same features further down ( it's not even mentioned on main page )

This is not great. Especially, that you could probably use examples that wouldn't be misleading as react is really bad when it comes to devex and amount of code.

Re: Tailwind vs. Semantic CSS

#196

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. But you are wrong and your claims are misleading :)

I'm actually quite relieved. I was expecting much more hate & resistance from the Tailwind community. Showing this to people who prefer the semantic approach obviously gives a whole different reaction.

Do you see what I'm saying? You expected hate. You wrote it with the expectation of causing a reaction so you framed it in a way that could cause reactions to promote your framework as all your previous (also polemic) posts. This is against HN guidelines.

> Please don't use HN primarily for promotion. It's ok to post your own stuff part of the time, but the primary use of the site should be for curiosity.

Re: Tailwind vs. Semantic CSS

#197
post #190

Earlier quoted context omitted.

The problem is that CSS’s intended usage is broken, and never lived up to expectations.

I think CSS does a good job at separating structure from presentation. Or what do you think was the original intention? Do you think Tailwind fixed the core issue with CSS?

I really recommend you reading the blog post by tailwind’s creator himself: https://adamwathan.me/css-utility-classes-and-separation-of-...

Your “semantic” CSS depends on your HTML structure. Tailwind’s HTML depends on a fixed set of CSS styles. None is any more coupled than the other, it’s just that the direction of the dependence is different.

Depending on what is expected to change more, both can be a valid approach: e.g. for a blog post that only uses heading, emphasis, link, styling it from CSS alone is definitely the best choice (that’s what it was developed for). But I would argue, most real-world web applications see more HTML-changes, and thus the other direction may make more sense.

Re: Tailwind vs. Semantic CSS

#198
post #197

Earlier quoted context omitted.

I think CSS does a good job at separating structure from presentation. Or what do you think was the original intention? Do you think Tailwind fixed the core issue with CSS?

I really recommend you reading the blog post by tailwind’s creator himself: https://adamwathan.me/css-utility-classes-and-separation-of-... Your “semantic” CSS depends on your HTML structure. Tailwind’s HTML depends on a fixed set of CSS styles. None is any more coupled than the other, it’s just that the direction of the dependence is different. Depending on what is expected to change more, both can be a valid approa…

Fully aware of this post. It's well written and I can see why people follow his stance. But I don't share Adam's history and experiences with semantic CSS. I genuinely want to separate structure from styling and not end up to this situation:

https://nuejs.org/blog/tailwind-vs-semantic-css/img/markup-b...

Re: Tailwind vs. Semantic CSS

#200
post #38

Earlier quoted context omitted.

No this article is flawed. It fails to recognize the fact that css and html are always coupled in one direction or another. With tailwind the css is fixed and the html is designed around it. With semantic the html is first created and then you write your css around it. The fact is that updating css in a big project and a big team is very difficult. Rules are scoped globally. It only takes a junior making a few design…

Author here. You are right: HTML and CSS are always coupled. The major difference is that Tailwind embraces tight coupling and semantic CSS embraces loose coupling. Please check the "Best practises" section: https://nuejs.org/blog/tailwind-vs-semantic-css/#best-practi...

[deleted]
Post reply on HN