CSS Modules in 30 seconds

ross profile image Ross Creighton Jan 12, 2018 Updated on Jan 15, 2018

CSS Modules allows us to write CSS rules that are restricted to a certain part of the UI. It is not an official specification or browser implementation, but rather a process enabled by a build tool like Webpack. In contrast to a regular CSS selector, which can match any element, a CSS Modules selector can only match elements in a specific part of the UI (e.g. in a specific React Component). Build tools accomplish this by transforming the selectors we write into new, globally unique selectors and then applying the new selector to the associated UI element.