fosstodon.org is one of the many independent Mastodon servers you can use to participate in the fediverse.
Fosstodon is an invite only Mastodon instance that is open to those who are interested in technology; particularly free & open source software. If you wish to join, contact us for an invite.

Administered by:

Server stats:

11K
active users

Ivan Enderlin 🦀

Tailwind CSS vs. Semantic CSS, nuejs.org/blog/tailwind-vs-sem.

An article about why Tailwind creates bloated, heavy documents.

> The semantic version is 8× smaller, renders faster, and is easier to modify and extend.

Please, remember that producing smaller documents is good for everyone: battery of the user’s device, server CPU, network bandwidth, electricity used to transfer and handle (parse, render…) all the data. It’s our responsibility as developers to save data and be smart, not lazy.

nuejs.org · Tailwind vs Semantic CSSBuild the slickest websites in the world and wonder why you ever did them any other way

@hywan I find a good mix between component vs utility css to be best for me. The hard part of comp-based css in large complex sites (which is ignored in this example) is insight into what will change when changing an underlying class. It is often times very hard to predict, that is my experience.

I have no data, but isn't one of Tailwind pros that the stylesheet will stop growing in relation to amount of components and variations that exists on a site? Where as component has to duplicate css

@royalrex @hywan I guess you cannot say that in general. My guess would be that the additional classes you need to add to your HTML outweigh the smaller CSS, so it is a net negative, at least if you are using the components multiple times.

@danrot @hywan Good point. Makes sense in a SSR heavy context.

@hywan Tailwind reminds me <font color="" /> days.

@hywan I was going to step up and defend tailwind (I do like it), but then I looked at their docs and it seems like one of their first recommendations for simplifying the editing of swathes of repeating utility classes is ...

USING MULTICURSOR EDITING.

tailwindcss.com/docs/reusing-s

(They do go on to talk about making reusable styles and components/templates, with some seemingly-strong points in support of their approach... but I dunno. Might be insufficient.)

tailwindcss.comReusing Styles - Tailwind CSSManaging duplication and creating reusable abstractions.

@hywan
I feel like I'm always seeing the justification for tailwind's popularity being that "devs never learned css or don't know how to use css correctly".

Just seems like an odd take when 50% (this is the actual stat) of the frontend community is on tailwind. Tailwind was a nobody in 2019. So many developers dropped bootstrap, SASS, etc for tailwind.

Tailwind, simply, is fast and flexible. Those benefits need to be recognized if we're to convince devs of a better solution.

@hywan As others have noted here (news.ycombinator.com/item?id=3), this article/the author:
- compares code of two unequal websites
- makes false statements about what Tailwind offers
- doesn’t seem to understand why Tailwind exists and denies it has any advantages
- falsely sells Tailwind as a tool for newbies who don’t know/care about CSS structure

news.ycombinator.comTailwind vs. Semantic CSS | Hacker News

@hywan it doesn't have to be either-or

Tailwind is perfectly capable of working well as a tool in support of the built-in semantics of HTML

@apply is the tool for this job. With that, a little effort, and PostCSS stripping unused styles, I’d be very surprised if one couldn't get the best of both worlds here using Tailwind

Which is an objectively better outcome for bigger, long-term projects

@hywan Plus, replacing all the stuff on the left with the lines on the right is so damn satisfying.

I used to write scripts for dfhack in dwarf fortress, it was just lua, but I had a basic enough idea of how to poke at the bits, find hooks, and produce neat effects.

When I discovered ways to condense dozens of lines into a handul with clever selections or better targeted hooks it always resulted in a big thwap of dopamine seeing the same/better effects from cleaner more elegant code.

@hywan The comparison makes no sense.

- The recreated design misses SO many details
- it's worse in terms of accessibility (bad focus styles and contrasts at least in dark mode)
- No automatic dark mode
- No code snippets in the examples (which need CSS...)
- Next.JS vs another framework
- Even the "back" button functionality is broken

I don't know what the author wants to prove. Reducing functionality, ignoring details and accepting bugs definitely reduces bundle size...