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

121–130 of 211 posts

Re: Tailwind vs. Semantic CSS

#121

Post by [deleted] »

Loeffelmann wrote: post #115
tipiirai wrote: post #99

Earlier quoted context omitted.

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

[deleted]

Re: Tailwind vs. Semantic CSS

#122

Post by cal85 »

tipiirai wrote: post #114
cal85 wrote: post #93

Earlier quoted context omitted.

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

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

Re: Tailwind vs. Semantic CSS

#123

Post by Timon3 »

oldnet wrote: post #13

I never understood why use tailwind when I can have semantic css without any extra unusable content. Btw Bootstrapt is still there EDIT: Semantic css is also bandwidth friendly for mobile connection.

What "extra unusable content" are you talking about? With the recommended setup you only ship the CSS that your website uses.

Re: Tailwind vs. Semantic CSS

#124

Post by SebastianKra »

Most of this Article focuses on the argument that you can use CSS classes for code deduplication.

> There is no need to write a component for every situation because you can use external CSS

Unless you're writing the most basic document-type html, this is awful advice. Even the tiniest widgets can be subject to a structural change. I can only think of the line: "Implement Select, 2000 issues" [1] Admittedly, CSS can correct the structure in some cases. Grid gives us more control over the arrangement, :before and :after can add elements... but in the end, you're just praying that you won't run into a requirement for which you need to update 200 html instances. The realisation that styling is inherently coupled to the structure, and that you will rarely have two components with both identical structure and style, is why css is generally scoped to each component.

For anything that is scoped globally, use a component.

[1]: I forgot where I picked this up, could've been a video for Radix-UI.

Re: Tailwind vs. Semantic CSS

#125

Post by tobr »

sbergot wrote: post #109
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.

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.

Both of them need to conform to the same allowed patterns of markup. I think we lack a kind of markup schema or type system that everything can be validated against, where we can verify that our design takes every state and permutation into account, and that both styling and content implements their part of it correctly.

Re: Tailwind vs. Semantic CSS

#126

Post by HelloNurse »

sbergot wrote: post #111
HelloNurse wrote: post #68

Earlier quoted context omitted.

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.

New and updated CSS rules should be usually needed for new "themes", exactly the type of change that semantic markup is robust against (e.g. placing image captions in a sidebar rather than below the respective images), and for backwards compatible extensions of the original design that add support for something new that will only be used in new markup in new pages (e.g. allowing small images inside paragraphs, meant to be displayed inline, in addition to large ones between paragraphs).

What kind of fragile markup and problematic CSS global rules are you worrying about?

Re: Tailwind vs. Semantic CSS

#127

Post by tempmac »

config_yml wrote: post #73
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.

I have rarely seen this work in practice in 20 years of CSS, but maybe in CSS Zen Garden. Yes, you can freely change the CSS. But usually changes are triggered by the HTML, like some information is added. This then requires you to change the CSS and likely break all sorts of other uses, which is not a problem with Tailwind.

hmm maybe IDE plugins can solve this? (eg. add a 'hover to show css' or 'expand css if I press ctrl+alt')

as for tailwild, I just can't bare its wide-ness - too many className attribute string going over 150~300 char widths, with some ternary operators mixed on top...

(seems vanilla-extract / ete have better DX, with occasional inlining for immediate deadlines)

Re: Tailwind vs. Semantic CSS

#128

Post by oliwarner »

I hate tailwind for top level layout.

This article does a good —if exaggerated— job of explaining the disconnect between markup and meaning, as well as the sheer volume of cruft. But tailwind does present well. Its plethora of sane defaults look… nice.

What I find myself doing more often than not is using tailwind classes in my handwritten SASS, using the @apply utility. I get tailwind's reset and typography but my markup isn't full of jank. PostCSS, PurgeCSS (or whatever's actually going on inside Vite) keeps everything small.

It's also good practice to try flying solo. A reset stylesheet and style everything, yourself. Few projects require that much CSS and it's a good excuse to try out some new ways of doing things. Because there are now several ways to accomplish major layout tasks, you can be quite expressive with CSS.

---

I've seen a few comments saying that maintenance is harder without utility CSS scattered throughout your markup. I think if you're struggling to maintain a semantic site, you're doing something wrong.

Even if you're using a complex SASS+Purge build chain, a sourcemap tells you exactly what's going on with a quick right-click-inspect. This method of development gives you a lot more space to split and comment on your source than you might want to in the middle of markup. Good component names help too.

Re: Tailwind vs. Semantic CSS

#129

Post by tipiirai »

cal85 wrote: post #122
tipiirai wrote: post #114

Earlier quoted context omitted.

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

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 are more eager to switch and find the new way more enjoyable.

Re: Tailwind vs. Semantic CSS

#130

Post by sam_goody »

tipiirai wrote: post #2

Author here. I implemented the commercial Tailwind "Spotlight" template with Semantic CSS and compared the differences in weight, amount of HTML and CSS, rendering speed, and best practices. I was surprised to find _that_ much overhead in Tailwind. Curious to hear your thoughts.

Tailwind templates are extremely verbose, because they feel it is worth to spend their time optimizing features and adding designs to trying to make their code smaller.

I have often used their components as a basis, and clean up huge chunks because I feel that is in my interest for future maintainability - it is not a fault of Tailwind, but a decision they made.

You can make a "semantic" design , using Tailwind where it will save you tiem or add readability, and get the best of both worlds.

Post reply on HN