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

161–170 of 211 posts

Re: Tailwind vs. Semantic CSS

#161

Post by cal85 »

tipiirai wrote: post #129
cal85 wrote: post #122

Earlier quoted context omitted.

Sorry, I can't see any meaningful difference in my rewording. Could you clarify?

Saying this: > when you don't care about 'badly structured' CSS Is a completely different claim than this: > You are comparing Tailwind with your earlier, badly structured CSS I'm sure we both care about CSS structure. My claim talks about developers' past experiences. If you enjoy semantic CSS, you probably won't switch to (unsemantic) Tailwind. And vice versa: if you never mastered semantic CSS (even hated it), you…

OK, I'm not sure how that affects my point. The point is, I'm living proof you are wrong on this particular claim. Tailwind makes me faster, and it's not for any of the reasons you said could be the only reasons.

The more general issue is your article doesn't demonstrate that you have grasped the purported benefits of Tailwind. You just deny they exist. It would be fine if you showed that you understand the purported benefits before explaining why you still prefer handwritten CSS on balance.

In particular, I can tell you don't understand that no longer using CSS classnames for reusability (and instead extracting components for reusability) is exactly what Tailwind users love about it, and no, not because they "haven't mastered semantic CSS". I know from experience that is initially unintuitive to a long-time CSS author, because I had a kind of Stockholm Syndrome for naming everything semantically and keeping my DOM super clean and avoiding extra divs. With Tailwind, you generally only name things when you extract them to components, and it's hard to explain but I after a while I came to realise this is just the perfect moment to name something, leading to better conceptual separation of semantics and styling logic, and much less proliferation of 'things' and ossification of the DOM.

I am not arguing Tailwind should be used for everything. I still use hand-written CSS for many things. And it is fine for someone to not like Tailwind after understanding it. I am just saying that you haven't understood it yet. Perhaps you wouldn't like it anyway, but imo it's worth really giving it a try.

By the way, giving it a try means on a real project. If I have a one-off, never-to-be-edited-again page design such as the example in your article, then I would probably use handwritten CSS with semantic classnames, as the exercise would be to make the cleanest, most elegant and fast-loading bundle of HTML and CSS possible. But in more realistic component-based projects that are expected to change over time, Tailwind can be an excellent trade-off, sacrificing a tiny (really, tiny) amount of elegance and bandwidth for a lot of engineering flexibility.

Re: Tailwind vs. Semantic CSS

#162

Post by porridgeraisin »

porridgeraisin wrote: post #156
tipiirai wrote: post #154

Earlier quoted context omitted.

Again. This is purely a matter of taste. I personally prefer the semantic approach.

Of course. From each person's POV, it is a matter of taste. But in real life, in the 80% case, a true software "team" doesn't exist. Instead, you have a bunch of individuals working on a product, who won't be ready to fix issues in another person's feature. It is very common to map features/components to people when managing software teams, in the obvious case with react,etc, and even in Ruby on rails type stuff to a…

Addition:

Of course, people without the problems use the solution because $bigtech does it.

That is a separate problem :)

Re: Tailwind vs. Semantic CSS

#163

Post by HenriTEL »

tipiirai wrote: post #149
HenriTEL wrote: post #145

Oh and by "mastering css" we just mean to learn the basic box model (width, margin, padding), units (em, rem, px, %, vh, dvh, lvh, etc.), the normal flow of each HTML element, the display basics (inline, block, contents, none, initial, revert, inherit, unset, etc.), positioning (relative, static, absolute, etc.). Flexbox and Grid deserve their own chapters. Ah there's also those capabilities for elements to float and…

Yes! I strongly recommend to learn the fundamentals of web development and the basics of HTML, CSS, and JavaScript. At least if you are pursuing a career on web development. Learning CSS makes you a better Tailwind developer too.

HTML is ok, you don't have that many elements anyway. JS is fine too, learning the basics of OOP and any imperative language compounds. But css? oh boy. It feels like a Frankenstein monster where each improvement comes with its new set of ad-hoc features. `grid-template-rows: masonry;` wtf is even that?!

Re: Tailwind vs. Semantic CSS

#164

Post by Timon3 »

flagrant_taco wrote: post #160
Timon3 wrote: post #118

Earlier quoted context omitted.

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

There are a few important limitations, Tailwind can't fully support logical properties for example because `mb-8` could mean margin bottom or block. Any use case that requires styling one element based on another gets a bit hairy too. Both of these can be technically worked around. Config may be able to disable existing margin/padding classes and replace them with a custom set, and the groups feature helps especially…

Thank you for the correction!

Re: Tailwind vs. Semantic CSS

#165

Post by e12e »

azangru wrote: post #97

> The semantic version is smaller because it utilizes high-level, semantic components like .nav What is the purpose of writing if you can just write ? There seems to be only one navigation element on that page, and the class isn't adding anything that is not already expressed by the tag name.

> writing if you can just write

Pure semantic CSS only works if you have a strict html document structure - where eg every h1 is an article heading. Any hint of "components" (like an image gallery, navigation menu) become way too fragile with pure CSS because you will be trapped when trying to get the correct specificity.

I agree that class names that match element names is a bit of a smell - but might be forgiven in this particular case, if html nav elements are used in different contexts.

Re: Tailwind vs. Semantic CSS

#166

Post by jacknews »

d1sxeyes wrote: post #24

Tailwind excels when it’s used on reusable components. Anyone handcoding Tailwind for a full page will start to hate it quickly. But you can have the best of both worlds with apply: .card { @apply p-2 rounded shadow text-gray-700; }

Exactly, I thought this was in fact the whole premise of tailwind. Scattering it directly through the html is just for testing or special cases.

Re: Tailwind vs. Semantic CSS

#167

Post by e12e »

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.

CSS and HTML is great for documents - not so great for applications. Most sites end up implementing their own navigation UI/UX at a minimum (an application) - many end up as more applications.

For an example of "documents", see eg:

https://edwardtufte.github.io/tufte-css/

Or

https://alistapart.com/article/building-books-with-css3/

Re: Tailwind vs. Semantic CSS

#169

Post by tipiirai »

HenriTEL wrote: post #163
tipiirai wrote: post #149

Earlier quoted context omitted.

Yes! I strongly recommend to learn the fundamentals of web development and the basics of HTML, CSS, and JavaScript. At least if you are pursuing a career on web development. Learning CSS makes you a better Tailwind developer too.

HTML is ok, you don't have that many elements anyway. JS is fine too, learning the basics of OOP and any imperative language compounds. But css? oh boy. It feels like a Frankenstein monster where each improvement comes with its new set of ad-hoc features. `grid-template-rows: masonry;` wtf is even that?!

I agree. It's a super weird "language". There are flaws of course, like the grid syntax is a bit wild. But love the very basics: the cascade, the selectors, and the ability to separate styling from the structure.

Re: Tailwind vs. Semantic CSS

#170

Post by Pazzaz »

This probably isn't related to semantic CSS, but the "Semantic version" isn't working properly. If I open "https://nuejs.org/@spotlight/" and then click on an article, then try to return to the previous page, it will change the URL but not the page itself. This happens on both Firefox and Chrome.
Post reply on HN