CSS Modules With React

CSS Modules are one of the most popular ways for styling React components. Whether you are using only CSS or a more advanced pre-processor like SASS, it doesn't matter for CSS Modules: You can write all these styles in your style sheet files next to your React components.

This can seem quite confusing at first, but really the process to implement CSS Modules can be simplified to just 4 steps, as demonstrated in the below example.

The article is a short how to use CSS Modules in your create-react-app application. It shows you how to setup CSS Modules, but also how to use it in your components.

I recently started on an Isomorphic React project. I wanted to use this opportunity to utilize tools that were on my “potential to use” list, and CSS Modules was one of them.

Today we're talking about CSS Modules! Why are they great? Why are they cool? Why will you want to use them before the video is through?!

Fair warning! This isn't a speedy, straightforward, expert-driven plow-through of how to set up these technologies. Although, by the end, we do successfully get it all going. This is about documenting the real-world experience of doing this kind of work. Some things work easily, some don't.

CSS Modules are not my favorite, but they're pretty much the only option when you have a bunch of existing CSS that you want to make better.

This course is designed for developers in the React community who are now seeking to leverage CSS modules, components, grids, and more.