3

So there are a fair few blog posts about that introduce CSS modules. For example:

These show us the syntax, and what they do, and how to use it.

But what actually is CSS Modules?

  • Is it a library that needs to be installed?
  • Or is it a spec/methodology that various pre/post processors, bundlers use that eventually compiles to JS?
  • A formal spec created by a standards body?
Christophe
  • 77,139
dwjohnston
  • 2,553

2 Answers2

6

CSS modules rely on the native CSS and JavaScript processing capability of web browsers. Therefore you need not install anything new; a web site might use them and you could never notice.

As the example shows, marking up your web pages this way ultimately results in plain old HTML and CSS declarations being processed by your browser. And as the tutorial mentions, this is not a standard of any kind yet, it's just a particular way of using the (basically unlimited) power that embedding a full programming language in the browser gives you.

The reason people introduced them is that it allows them to introduce the notion of scope into the naming of CSS declarations. CSS classes normally all share just one huge global namespace; allowing localized identifiers makes it easier to compose large web apps from smaller components.

Kilian Foth
  • 109,273
3

Its a js based workaround for the lack of scope in CSS.

The bundler/framework assigns auto-generated unique classes to your css scripts and then dynamically inserts them into the appropiate place in the html as part of the build process.

Its essentially the automation of the BEM naming convention.

Rob
  • 167
  • 3