CSS Modules in 30 seconds

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.

Did you find this post useful? Show some love!
Classic DEV Post from May 18

Async + Await refactor, which do you like best?

Async + Await is soo good.

READ POST
Follow @wilburpowery to see more of their posts in your feed.
Ross Creighton
Member since Jan 18, 2017
More from @ross
CSS Flexbox in 30 seconds
#css #inthirtyseconds
ReduxJS in 30 seconds
#javascript #redux #react #inthirtyseconds
Trending on dev.to
Sweating the very small design details: external links
#css #webdev #design #discuss
What was your first computer?
#discuss
Explain Higher Order Component(HOC) in React.js like I'm five
#explainlikeimfive #beginners
Dev and Designer Communication
#discuss
Sweating the very small design details: external links
#css #webdev #design #discuss
Why do employers check job candidates' GitHub profiles?
#discuss
What kind of breaks do you take throughout the work day?
#discuss
Developer Interview Bloopers
#career #development #interviews #php