‫One important part of building web applications
‫is, of course, to style them with CSS.
‫Now, up until this point, we have always just
‫included a global external CSS file into our applications,
‫and then used the class names from there in our JSX.
‫However, in this project,
‫we will do something a bit different,
‫which is to use CSS modules.
‫But before we do that, I want to take a minute
‫to quickly explore all the different options
‫that we can use to style React applications
‫because there are actually a lot of them.
‫But first you might be wondering, why are there
‫actually so many different ways of styling a React app?
‫Well, it's because one fundamental philosophy of React
‫is to be unopinionated in regards
‫to many common aspects of building web applications.
‫And so one of them is styling.
‫So React really doesn't care
‫about how you style your applications.
‫And so as a result,
‫we have lots of different styling options,
‫most of them being provided by third party libraries.
‫So the first option is one
‫that we have used a few times in the beginning,
‫which is to simply apply some inline CSS
‫to JSX elements using this style prop.
‫Now, this is actually more common in React
‫than in regular HTML
‫because of React's idea of separation of concerns.
‫Now, an inline style is scoped
‫to the particular JSX element that it's applied to,
‫which means that it is locally scoped,
‫so it applies only to that exact element.
‫Now, we have also multiple times
‫included an external CSS file,
‫and then simply applied the CSS classes
‫using the class name prop.
‫And the same would actually
‫also have worked for a Sass file.
‫Now, in this case, our styles are actually global,
‫which means that every single JSX element
‫in the entire application could use any of these classes
‫in the external CSS file.
‫And this can create huge problems,
‫especially in big projects,
‫for example, because you won't know
‫which components are using which classes.
‫And when you then update one of the classes,
‫it will have repercussions in other components,
‫or when a developer adds a new class
‫with a name that already exists,
‫that will create clashes between those two classes.
‫So basically, global CSS is a nightmare in large apps.
‫So in professional projects, CSS is almost never global.
‫Instead, CSS should be scoped to an individual component,
‫which brings us to the next styling options,
‫which is CSS modules.
‫CSS modules are pretty similar to regular CSS files
‫with the difference that we write just one CSS file
‫for each of our components.
‫The styles in that file will then be scoped
‫to only that component
‫so that no other component can use them.
‫And this then makes the components
‫way more modular and reusable.
‫And at the same time,
‫it better reflects React's separation of concerns.
‫And in fact,
‫this is exactly what we will do in this project.
‫Now, if you want to take it even one step further,
‫you can go with a CSS in JavaScript library
‫like styled components.
‫So as the name says with CSS in JavaScript,
‫you actually write your CSS inside a JavaScript file,
‫so in the same file where you define your components.
‫What's special about a CSS in JavaScript library
‫is that it allows us to create React components
‫that have our styles directly apply to them,
‫which we can then use just like regular components.
‫So this fully embraces the React philosophy
‫that a component should contain all the information
‫about its appearance, and so that includes CSS.
‫And finally, you can also use a utility-first CSS framework
‫like Tailwind, which is getting more popular every day.
‫So in Tailwind, you use predefined utility classes
‫to define individual styles, to use flexbox,
‫to make layouts responsive, to make hover effects,
‫and really to design your entire UI,
‫and all that without ever having to leave the JSX markup.
‫Okay, now finally,
‫you do actually have one more option here,
‫which is basically to not write any CSS at all.
‫Wait, what? No CSS?
‫Well, it is actually possible,
‫because you can build your entire project
‫using a fully fledged UI component library,
‫for example, like Material UI, Chakra UI, or Mantine.
‫So essentially, a component library like those
‫contains all kinds of prebuilt and pre-styled components
‫that are common in most web applications.
‫This is, however, not ideal for beginners,
‫but again, it might be worth exploring later.
‫And there you have it.
‫So these are the different ways
‫in which we can style React applications.
‫And so in this project, we will now explore CSS modules.