Four ways of applying styles in your React application

If you are thinking about creating a React app, you have to consider styling. There are a couple of ways of styling in React. Let's take a closer look

Photo by Alessandro Sacchi on Unsplash

I'll explain the different ways of styling your React application, the pros and cons, and my favorite one!

We'll cover:

  • CSS or SASS
  • CSS Modules
  • CSS-in-JS
  • Atomic CSS

Vanilla CSS or CSS Preprocessors

The old fashion way of using CSS is still valid when working with React. Instead of using a link tag, you can directly import CSS files with a simple import rule: 

import './styles/styles.css'

Now you have access to your CSS classes in that component! If you want to use SASS (or your preprocessor of choice), React easily supports it. You only have to take an extra step, installing node-sass on your project. Run this command: 

npm install node-sass

Now, you can import your SASS files like any other CSS file.

import './styles/styles.sass'

CSS Modules

Modules are a way to use vanilla CSS in your project but without the hustle of coming with different class names. It resolves clashes between classes, you can have two with the same name, but they will work just fine.

If you want to use vanilla CSS in React, modules are the way to go!

To use modules in your project, you have to use the convection of [name].module.css on your files. Say we have a Button.module.css stylesheet, you can import and use it like this: 

import styles from './Button.module.css' // We import the stylesheet

export default function Button() {
  return (
    <button className={styles.class}>
      I'm a cool button!
    </button>
  )
}

If you have another stylesheet, Global.module.css, and have the same class named 'class' (how original). You can import it and use it without a problem! 

import buttonStyles from './Button.module.css'
import globalStyles from './Global.module.css'

export default function Button() {
  return (
    <button className={buttonStyles.class globalStyles.class}>
      I'm a cool button!
    </button>
  )
}

When we work with CSS in our React application, we have a couple of pros and cons:

Pros:

  • It's just CSS. If you know CSS, you can style an application in React equally as an HTML website.
  • It is beginner-friendly. It is probably the easiest way to style your React application.

Cons:

  • Clashing class names.
  • Hard to maintain. Vanilla CSS is hard to manage in general, and organize it well can be demanding.
  • A lot of files. If you follow component-based styling (one stylesheet - one component), you'll see your file count go UP.

CSS Modules does solve a lot of the pains with vanilla CSS, if you want to find more about modules, read this handy article.

CSS-in-JS

It is an approach to write CSS directly in our JavaScript files. There are a ton of libraries that make this happens, like styled-components or Emotion, and they solve some of the problems we may face when using vanilla CSS with a framework, like React.

CSS-in-JS has become the "standard solution" for styling React applications, usually on medium to large applications. If you are creating a to-do app, I think CSS-in-JS is overkill.

Go to your favorite CSS-in-JS library documentation to learn how to install and use it in your application.

Pros:

  • Component base styles. Because you are writing your CSS on your components, they are only available on that component. Bye-bye class name collisions!
  • Maintainability. CSS-in-JS embraces the component bases of React. It means you'll know where the style is from what component because they are on the same file.
  • It is CSS. In the end, we want to write CSS. CSS-in-JS gives us the tools to write CSS in a more Reactive manner.

Cons:

  • Learning curve. Learning CSS-in-JS takes some time. Even more, when you are making dynamic components that change their styling depending on some props.
  • Complexity. CSS-in-JS adds a layer to your already complex React files. They are going to be bigger, and probably you want to make even smaller components.

Atomic CSS (TailwindCSS)

If you already read my other articles, you probably know I love TailwindCSS. Atomic styling is, in a way, CSS-in-JS. It uses classes with one property (like padding or margin) and lets you not write a single line of CSS. It also follows the component base approach for React.

All the pros and cons of TailwindCSS are in their docs. Take a look if you have an interest. I just wanted to make it appear here as I am Tailwind-missionary.