As we've been working on our project, we've been focusing very heavily on the functionality, but overall we have been perhaps slightly less focused on how everything actually looks! While this is fine for establishing functionality and making everything flow nicely at the start of the project, any designers working on the project will be ready to scream at this point!
Let's appease our design team, whether it's an actual team or just ourselves, by spending a little bit of time cleaning up the visual appeal of our project! In relation to our current design, while it's not necessarily hideous, it certainly leaves a lot to be desired!
So, how do we improve our application's design in a safe and sound way? Well, previously with Create React App, you actually didn't have a lot of options to be able to clean things up visually. You were frequently at the whims and mercy of random Cascading Style Sheets (CSS) project maintainers, and trying to get other libraries, frameworks, or preprocessors involved in the project compilation process was frequently a nightmare.
Over the span of this chapter, we'll be covering materials that span the gamut of style-related functionality and highlighting what is, in my mind, one of the best new features in Create React App: support for CSS Modules and SASS. Specifically, we'll be covering the following topics:
- The different ways to get CSS into our project
- A brief history of CSS in Create React App projects
- Introducing CSS Modules
- Introducing SASS to our project
- Mixing CSS Modules and SASS together
- Integrating CSS Modules and SASS into our project
- Integrating CSS frameworks into our project
- Cleaning up our tests after modifying the design