3 ms·

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

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

satvikpendem 4y ago
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.
- dmitriid 4y ago
  > 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
  - satvikpendem 4y ago
    We have our own design systems, and we'd just use regular CSS classes instead.
    - dmitriid 4y ago
      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 https://design.fusionfabric.cloud/components/app-bar?tab=dev [2] Opensource design system by RedHat https://www.patternfly.org/v4/components/alert/html https://www.patternfly.org/v4/components/alert/html

satvikpendem 4y ago

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.

dmitriid 4y ago
> 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
- satvikpendem 4y ago
  We have our own design systems, and we'd just use regular CSS classes instead.
  - dmitriid 4y ago
    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 https://design.fusionfabric.cloud/components/app-bar?tab=dev [2] Opensource design system by RedHat https://www.patternfly.org/v4/components/alert/html https://www.patternfly.org/v4/components/alert/html