3 ms·

Why do people prefer it over CSS modules? They also solve the style containment problem, and do not require any effort to set up, or any additional library to l

by azangru 9mo ago

Why do people prefer it over CSS modules? They also solve the style containment problem, and do not require any effort to set up, or any additional library to learn?

troupo 9mo ago
You're probably confusing something with something? CSS Modules are a JS-only third party solution re-invented/re-implemented in a dozen different ways for various JS frontend frameworks. Requires setting up, requires learning an additional library. If you mean these CSS modules: https://github.com/css-modules/css-modules?tab=readme-ov-file https://github.com/css-modules/css-modules?tab=readme-ov-fil... then they need to be supported by whatever build chain you use. And you literally need to use them slightly different than normal CSS. E.g. for Vite yuo need to have `.module.css` extension. And they often rely on additional libraries to learn. E.g. you can enable Lightning CSS with aforementioned Vite which comes with its own CSS flavour: https://lightningcss.dev/css-modules.html https://lightningcss.dev/css-modules.html If you mean CSS import attributes, they only appeared in 2024 in Chrome and Firefox, early 2025 in mobile Android etc. and they don't provide magical local scoping out of the box: https://caniuse.com/wf-css-modules https://caniuse.com/wf-css-modules
- owebmaster 9mo ago
  Well no, none of them ? This is what OP was talking about: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting/Using https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nest...
  - troupo 9mo ago
    No, he's not: https://news.ycombinator.com/item?id=46570846 https://news.ycombinator.com/item?id=46570846
    - owebmaster 9mo ago
      Ignore it then, CSS nesting and layers are the real deal
      - troupo 9mo ago
        Nesting is the bee's knees. I still don't understand what layering is, and why you would use it.
- azangru 9mo ago
  I meant the CSS modules that are implemented by a build tool. And yes, mea culpa, they are probably a js-only solution, requiring a build tool to correctly interpret a css import (.module.css in the file name is a common convention; but it is tweakable), and the author to use the imported object instead of plain strings, when referring to the class names. But I don't know if having to write `class="styles.foo"` as opposed to `class="foo"` counts as learning. And apart from that, there isn't anything else to learn. But, given that one would need build tools for tailwind as well, the requirement for build tools couldn't have played a role in the choice between the two.
  - uhoh-itsmaciek 9mo ago
    The problem is having to look in a different file for styling a component, and having to come up with a name for (at least one) CSS class per component. In traditional CSS, classes are intended to be reusable. You write a class definition once, and then use it in a bunch of different elements. When working with a component-based UI (like in React), the components are typically the unit of reuse. Those CSS classes are used in one place: the component they're defined for. It's annoying to have to come up with a name for them, and to have to work in a separate file, especially if I just want `padding-inline: 4px` or `display: flex`. Some argue separation of concerns, but CSS is inherently tightly coupled to the structure of your HTML: there's no getting around that. `.foo > ul` breaks if you replace that `ul` child with an `ol`. I do agree that more intricate styling is harder to read with Tailwind, and I have some other gripes, too, but in general it's a good trade-off for component-based UIs.
- gedy 9mo ago
  > CSS Modules are a JS-only third party solution re-invented/re-implemented in a dozen different ways for various JS frontend frameworks. Requires setting up, requires learning an additional library. I mean, Tailwind is not that different here - you must use a build tool to tree shake the styles, etc.

by azangru 9mo ago

Why do people prefer it over CSS modules? They also solve the style containment problem, and do not require any effort to set up, or any additional library to learn?

troupo 9mo ago

You're probably confusing something with something? CSS Modules are a JS-only third party solution re-invented/re-implemented in a dozen different ways for various JS frontend frameworks. Requires setting up, requires learning an additional library. If you mean these CSS modules: https://github.com/css-modules/css-modules?tab=readme-ov-file https://github.com/css-modules/css-modules?tab=readme-ov-fil... then they need to be supported by whatever build chain you use. And you literally need to use them slightly different than normal CSS. E.g. for Vite yuo need to have `.module.css` extension. And they often rely on additional libraries to learn. E.g. you can enable Lightning CSS with aforementioned Vite which comes with its own CSS flavour: https://lightningcss.dev/css-modules.html https://lightningcss.dev/css-modules.html If you mean CSS import attributes, they only appeared in 2024 in Chrome and Firefox, early 2025 in mobile Android etc. and they don't provide magical local scoping out of the box: https://caniuse.com/wf-css-modules https://caniuse.com/wf-css-modules

owebmaster 9mo ago
Well no, none of them ? This is what OP was talking about: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting/Using https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nest...
- troupo 9mo ago
  No, he's not: https://news.ycombinator.com/item?id=46570846 https://news.ycombinator.com/item?id=46570846
  - owebmaster 9mo ago
    Ignore it then, CSS nesting and layers are the real deal
    - troupo 9mo ago
      Nesting is the bee's knees. I still don't understand what layering is, and why you would use it.
azangru 9mo ago
I meant the CSS modules that are implemented by a build tool. And yes, mea culpa, they are probably a js-only solution, requiring a build tool to correctly interpret a css import (.module.css in the file name is a common convention; but it is tweakable), and the author to use the imported object instead of plain strings, when referring to the class names. But I don't know if having to write `class="styles.foo"` as opposed to `class="foo"` counts as learning. And apart from that, there isn't anything else to learn. But, given that one would need build tools for tailwind as well, the requirement for build tools couldn't have played a role in the choice between the two.
- uhoh-itsmaciek 9mo ago
  The problem is having to look in a different file for styling a component, and having to come up with a name for (at least one) CSS class per component. In traditional CSS, classes are intended to be reusable. You write a class definition once, and then use it in a bunch of different elements. When working with a component-based UI (like in React), the components are typically the unit of reuse. Those CSS classes are used in one place: the component they're defined for. It's annoying to have to come up with a name for them, and to have to work in a separate file, especially if I just want `padding-inline: 4px` or `display: flex`. Some argue separation of concerns, but CSS is inherently tightly coupled to the structure of your HTML: there's no getting around that. `.foo > ul` breaks if you replace that `ul` child with an `ol`. I do agree that more intricate styling is harder to read with Tailwind, and I have some other gripes, too, but in general it's a good trade-off for component-based UIs.
gedy 9mo ago
> CSS Modules are a JS-only third party solution re-invented/re-implemented in a dozen different ways for various JS frontend frameworks. Requires setting up, requires learning an additional library. I mean, Tailwind is not that different here - you must use a build tool to tree shake the styles, etc.