postcss-nested VS css-modules

And we have to make sure that it runs before the nesting plugin, otherwise it will not work at all due to an issue when using both plugins together.

postcss-nested

What you're describing is nesting, which is currently in the proposal stages for CSS. That being said, nesting has long been a feature in many preprocessors, such as sass and less. You can also use this PostCSS plugin if you only want the nesting and nothing else.

My PostCSS Config contains postcss-preset-env already which should support for CSS nesting. I also installed postcss-nested & postcss-css-variables, just in case.

PostCSS Nested - so I can use Sass-like nesting.

A quick example that demonstrates what I've said would be the postcss nesting plugin: https://github.com/postcss/postcss-nested

It's not standard yet. Behavior is implementation-defined and under-specified. A lot of people have used a thing like this[1], but this[2] is on a standards track. In the documentation for the first one, it describes a default "file scope", but really no definition of what a file is. It seems to be referring to a source file pre-build/bundle, but it really just doesn't say. That would belong in the documentation for some framework, not web platform stuff anyway.

The idea of locally scoped styles is reasonably popular. Like vue single-file-components, and n+1 different implementations of CSS modules. What it really needs though, is standardization. Things like [2] and the upcoming @scope will provide this.

[1]: https://github.com/css-modules/css-modules/blob/master/docs/...

[2]: https://github.com/WICG/webcomponents/blob/gh-pages/proposal...

Additionally, when integrating visual components in structural components, use CSS Modules to avoid unexpected effects caused by external style code.

Use something as simple as CSS Modules, which is well supported in all major bundlers and frontend frameworks.

For styling DSS UI relies on vanilla-extract, which provides a robust scalable zero-runtime CSS base. Yet again, it’s a flexible choice, allowing for alternative approaches like CSS modules, Panda CSS, Tailwind etc.

CSS Modules CSS Modules is a CSS file in which all class and animation names are scoped locally by default. It allows for modular and reusable CSS, helping avoid global scope conflicts.

For the frontend, I'm diving into NextJS to get familiar with the framework. For styling, I'm enjoying using CSS Modules, and my frontend is comfortably hosted on Vercel.

CSS Modules are a popular way to write scoped CSS.

CSS Modules are particularly useful in component-based architectures like React or Vue, where they allow for the local scoping of CSS by automatically creating a unique class name for each style. This method avoids global scope issues and helps in maintaining modular and reusable components without the fear of styles bleeding across components.

React CSS Modules Documentation

Managing styles in large React applications can become a hassle as your codebase grows, but not if you use CSS Modules.