Hacker News Reader

Comment by satvikpendem | Hacker News Reader

So, the same as Tailwind then? That's also why I'd consider Tailwind a write only language, except with CSS you at least have the chance of organizing it properly.

View on HN

> So, the same as Tailwind then?

Worse.

With Tailwind you have a consistent set of classes scoped usually per component. Thos p-x, m-x, and others don't change from component to component or from project to project.

Hell if I know what `.chip-text__content` is, how it's different from `.icon-button__content`, why it interferes with my CSS, and what other 15 CSS classes I need on top of that to make it work.

I think there is a disconnect between what I'm talking about regarding CSS and what everyone else is. Yes, BEM and global styling is unmaintainable, I agree with you there. However these days even with Tailwind their approach is to componentize. In the same way, I can just use CSS modules with no global styles and get the same benefits of scoped styling like Tailwind provides without having something else break as a result of what I use in the current component. However, if you're using HTML without a JS framework, Tailwind can be superior to BEM and global styles, but still not as much as CSS modules, CSS-in-TS, and the like, due to maintainability concerns.

> However, if you're using HTML without a JS framework, Tailwind can be superior to BEM and global styles, but still not as much as CSS modules, CSS-in-TS, and the like, due to maintainability concerns.

How are you going to maintain consistent values across components such as spacing colors etc? Those tend to grow to the size of Tailwind

We have our own design systems, and we'd just use regular CSS classes instead.

So how is it different from Tailwind?

Every design system I've come across contains any combination of:

- rigid inflexible components that need complex overrides even for the simplest cases

- multiple classes with seemingly innocuous names like "col col-8" that get increasingly obtuse and one-off like "uxg-menu-header uxg-avatar-hero-block uxg-avatar" [1] or "fas fa-fw fa-bell pf-c-alert pf-m-info pf-c-alert__title" [2]

- multiple often contradicting css variables (esp. colors)

- ... i'm missing something else, but it's late here and my brain doesn't work ...

[1] Design system by some new age finance company: https://design.fusionfabric.cloud/components/app-bar?tab=dev

[2] Opensource design system by RedHat https://www.patternfly.org/v4/components/alert/html

Reply on news.ycombinator.com