Styling with the CSS Modules

CSS modules is an approach that allows us to scope CSS class names to specific components locally. It provides a way to write CSS code modular and encapsulated, reducing the chances of style conflicts and making the styles more maintainable. In fact, it has become one of the most widely adopted approaches for organizing React projects.

File-folder organization

Suppose we have the following user interface composed of three components: VideoPlayer, AuthorInformation, and VideoDescription.

We won't consolidate all components and styles into a single file. Instead, we will establish a separate folder for each component. Within each folder, we will create a jsx file for rendering and logic purposes and a css file for applying styles. Each css file should have the module.css at the end to achieve modularity. Thus, the structure would appear as follows:

Note
This approach offers a convenient solution for creating React components and writing styles. It ensures that each component is isolated and can be reused effectively. Locally scoping class names enhances code organization, promotes reusability, and avoids style conflicts.

Syntax

Let's explore the syntax of using modular styles for a component, using the VideoDescription component as an example.

Inside the VideoDescription.jsx, we create a component that generates a specific markup. There's nothing particularly new or unfamiliar about it.

The difference arises when we want to apply a class name. First, we must import the VideoDescription.module.css file into the VideoDescription.jsx file. We can accomplish this using the following syntax:

<file_name> can be any word we associate with the file. Generally, the name is given like: css, styles, or simply s;
<file_path> is the correct path to the file. We already know the syntax: ./.

Result:

To assign a class name to the element, we can utilize the className attribute. Within this attribute, we enclose the desired class name within curly braces {}. Inside the braces, we include the specific word associated with the styles file, followed by a dot . and the class name. Result: className={css.text}. text is the real class name.

Now we can open the VideoDescription.module.css file and apply the styles to the the p element with the text class name using class selector:

Everything was clear?

Section 2. Chapter 8

Course Content

Mastering React

1. Introduction to React Fundamentals

What is React?SPAs vs. MPAs in Web Development How React Works with the Virtual DOM Introducing JSX in React Creating Complex JSX Elements Rendering Elements in React Challenge: Rendering Element React Component Props in React Challenge: Functional Components Conditional Rendering Challenge: Conditional Rendering - Chat Notification Challenge: Conditional Rendering - Bank Alert Rendering a Data Collection Challenge: Rendering a Data Collection Introduction to React Section Sum-Up

2. Styling in React Apps

Introduction to Styling in React Inline Styles Inline Styles in Practice Challenge: Inline Styles Styling with the CSS File Styling with the CSS File in Practice Challenge: Styling with the CSS File Styling with the CSS Modules File Folder Structure Organization Challenge: CSS Modules Styling in React Section Sum-Up

3. React Hooks and Context

Introduction: React Hooks and Context useState Hook Challenge: Toggling Visibility useRef Hook Challenge: Creating a Form Component useEffect Hook Challenge: Fetching and Displaying Data useMemo Hook Challenge: Car List Filtering Context Context in Practice Challenge: World of Astronomy App React Hooks and Context Section Sum Up

4. React in the Real World

Setting Up Environment Code Editor Setting Up the Project Folder Terminal Starting the Project React in the Real World Section Sum Up