Solve Your Specificity Headaches With CSS Modules

Solve Your Specificity Headaches With CSS Modules

CSS Modules” is nothing to do with the W3C, rather part of a suggested build process. It compiles your project, renaming the selectors and classes so that they become unique, scoped to individual components. Styles are locked into those components and cannot be used elsewhere unless you specifically say so!

[…]

In this tutorial, we are going to look into “CSS Modules” and how it can help us to minimize these notorious CSS problems.

[…]

In a real project, we likely wouldn’t utilize CSS Modules using plain JavaScript. We would instead use a JavaScript framework like Vue. Fortunately, CSS Modules has been integrated to Vue through the vue-loader; a Webpack loader that will compile the .vue. Below is an example of how we would port our primary button into a .vue component.

[…]