In this video, Emmanuel Henri gives you an overview of what CSS modules are and how to approach them in this project. He shows you a slide demonstrating the one-to-one relationship of the components and CSS files.
- [Instructor] What exactly are CSS modules? Before I explain what they are, let's take a look at plain old CSS. When you work with CSS, you have one or many style sheets, and they live pretty much on their own. And that's fine for simple apps or websites. But when your application or website grows, most likely you'll need to start splitting your components into smaller chunks to make it more manageable. Yet your CSS, even with leveraging imports can become harder to manage, especially if you add scripts into your CSS.
So first, what we're going to do is build a background and have it's own background CSS. Then we'll add a title and a title CSS. Then we'll add a grid and its own CSS and that grid will hold all the NASA facts. And these are going to be grid items with their own CSS. And finally, we will add a rocket and smoke for it in their own CSS as well. So, when you look at this chart, you'll understand very quickly that if you need to find any classes that impact your components, it's going to be very easy to find.
So, all you have to is go, for example, to the grid item, and you'll find all the styles that impact that particular component. So you won't have to go through one big over bloated CSS file, as opposed to go through a little chunk of code, find your class, fix it, and off you go. Okay, so now that we have a good understanding of the benefits and how we are going to build our website, let's move on.
- Setting up React with CSS modules
- Navigating the directory structure
- Adding components to an app
- Using CSS syntax with components
- Leveraging other styles
- Using grid components
- Developing interactions and responsiveness
- Implementing media queries
- Combining styles