Applying Modern CSS to Create React App Projects

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...

What tools are available?

Create React App, by default, supports us getting CSS into our application in a number of different ways.

We can get CSS directly into our components by writing a style attribute and giving it some arbitrary CSS, as in the following code:

const Example = () => {
  return (
    <div className="Example" style="border: 1px solid red;">
      Hello
    </div>
  );
};

This will give us a little div with the word Hello in it, surrounded by a single-pixel red line for the border. While this is something you technically can do, generally speaking, you should avoid it. Using inline style statements like the preceding example makes it hard to keep your styles organized and track them down when formatting does go awry. Plus, if a designer or another non-developer needs to update the look and feel (for example, if the standard colors...

Introducing CSS Modules

The first of these are CSS Modules, and in Create React App 2 and higher, you don't need to do anything at all to start taking advantage of it immediately. CSS Modules give you the ability to modularize any CSS code that you import in a way that prevents introducing global, overlapping namespaces, despite the fact that the end result is still just one giant CSS file.

That being said, it's also not just going to immediately work in your project if you don't turn anything on or organize your code a little bit better. Right now, we've been placing all of our code directly into the src/ directory, resulting in a scenario where the root folder is going to keep growing and growing over time until it gets so large and unwieldy that you'll never be able to find anything.

...

Introducing SASS to our project

That's not all that the Create React App added support for as part of Create React App 2! By very popular demand, the Create React App team added in support for SASS pre-processing as well! Often, you'd pretty much be guaranteed that you'd need to eject your project as soon as you wanted to start working with any SASS in your project.

What is SASS?

Let's talk a little bit about what SASS actually is, since it's a pretty important thing to cover. Otherwise, you'd have no connection to why this is worth the effort (even though, to be fair, it is very little effort to integrate into your Create React App projects). SASS is essentially CSS with extended feature support...

Adding CSS frameworks

A very common use case that you'll run into as part of working on a frontend project is integrating some sort of third-party CSS framework. This is something I've had to do on nearly every frontend development project I've ever touched, and there's pretty good odds that you'll need to run through this same process!

We'll stick to one of the most common ones, since it will give you a good introduction to using frameworks in general, so we'll start off by integrating bootstrap into our project! It won't take much for our project to go from sort of ugly to actually kind of decent! As with most other things we've run into as part of our development process with Create React App, this is equally simple for us to implement! We'll start off by adding both bootstrap to our project and reactstrap, which is a pre-made...

Summary

We've added some nice new functionality to our project but didn't really have to engage in a lot of the headache and setup (and heartache, I suppose) that comes with adding two new CSS processors to our project! We have CSS Modules and SASS playing nicely in our Create React App project and have had to install a single new dependency. We have them playing nicely together even, which is an even greater achievement!

We've cleaned up our code a little bit and started grouping things together, and introduced concepts such as shared SASS files to store variables for colors and values, which allows us to change a color, for example, in one place and have it affect everywhere the variable appears!

Our code is cleaner, our designer is happy, we're happy, and we can continue to push forward on our project without having to slow down. We've never had to...