Introduction

In this lesson, we’ll look at using CSS Modules in React.

CSS Modules provides a way to use local styles in a project, unlike regular CSS or Sass which results in global styles - styles that apply to the whole project.

With CSS Modules, styles are applied only to the component in which they are imported.

While not necessarily a more correct solution than global styles, using local styles helps avoid class name clashes and removes the need to use naming conventions like BEM.

Video Lesson

Lesson Task

Brief

In this task you will practise styling a React app using CSS modules.

Download the XD file from this repo.

Process

Use Create React App and CSS Modules to create a React app for the design.

Example answer

You can find an example solution in the answer branch of the repo.

Resources

Tags: