How to style your React app

16 November 2021

There are many ways to style your React app.

1. Utility-first CSS
2. Inline CSS
3. Normal CSS
4. CSS Preprocessors
5. CSS Modules
6. CSS-in-JS
7. Premade CSS, and more.

I explained and compared all of them here. If you want to avoid decision fatigue, I recommend utility-first CSS (especially Tailwind CSS).

Utility-first CSS

This category includes Tailwind CSS, Tachyons, Shed.css, and more. I'll talk about Tailwind CSS here.

const Button = () => <button className='bg-blue-500 text-white'>Buy</button>

export default Button

👍 Pros

• Scoped styles
• Fastest to write and read
• It's easy to move and edit your code.
• You don't have to name elements.

👎 Cons

• Adding many classes into the HTML is a bit ugly.
• You have to spend some time first to understand Tailwind classes.

Inline CSS

const Button = () => (
  <button
    style={{
      backgroundColor: 'blue',
      color: 'white',
    }}
  >
    Buy
  </button>
)

export default Button

You add an object with CSS properties to the style attribute. Use camelCase. For example, background-color becomes backgroundColor.

👍 Pros

• No need to name your elements
• No dead code

👎 Cons

• Can't use media queries
• Can't use pseudo-classes and pseudo-elements like hover, focus, and other states
• Generally slower performance than other styling methods.
• Can't auto prefix vendor names to selectors
• Can't do keyframe animations
• Can't do global styles
• It loses the cascading nature of CSS

Normal CSS

button {
  background-color: blue;
  color: white;
}

Write your CSS in a .css file and import it into your component file.

import './Button.css'

const Button = () => <button>Buy</button>

export default Button

👍 Pros

• Simple

👎 Cons

• The styles are global. So there can be name repetitions and style overriding issues.
• Hard to delete dead code.
• Hard to maintain.
• Naming things is hard.

CSS Preprocessors

This type includes Sass, LESS, Stylus, PostCSS, and more. These are similar to normal CSS, but they have more features like extending styles, and nesting. Sass is the most popular in this category so I'll talk about it here. You can use .sass or .scss extensions for your files. .scss has the same syntax as normal CSS. .sass doesn't require curly braces and semicolons.

button
  background-color: blue
  color: white

👍 Pros

• Has many more features than normal CSS like mixins, nesting, and more

👎 Cons

• Same cons as normal CSS
• Nesting may be hard to scale.
• You might not even need mixins and nesting because of Component Composition.

CSS Modules

If you want to use CSS Modules, use the [name].module.css file naming convention. If you want to use CSS Modules with Sass, use the file extension [name].module.sass or [name].module.scss.

.button {
  background-color: blue;
  color: white;
}

In your component file, import the CSS modules and reference as a JavaScript object.

import styles from './Button.module.css'

const Button = () => <button className={styles.button}>Buy</button>

export default Button

Learn more about CSS Modules.

👍 Pros

• Since this scopes your style to the specific component, it eliminates name repetitions and style overriding issues.

👎 Cons

• At first, might be hard to understand the syntax

CSS-in-JS

This category includes styled-components, Emotion, styled-jsx, and more. styled-components is the most popular in this category so I'll talk about it here. The syntax looks like this:

import styled from 'styled-components'

const StyledButton = styled.button`
  background-color: blue;
  color: white;
`

const Button = () => <StyledButton>Buy</StyledButton>

export default Button

Most CSS-in-JS use a special type of JavaScript function called a tagged template literal. You can associate styles with any HTML elements, for example, styled.button, styled.h1.

👍 Pros

• Scoped styles
• Easy to implement dynamic styling
• No name collision

👎 Cons

• A bit of a learning curve for beginners

Premade CSS

This category includes Bootstrap, Materialize, Semantic UI, and more. I'll talk about Bootstrap here.

const Button = () => <button className='btn btn-primary'>Buy</button>

export default Button

👍 Pros

• Save time and energy
• Consistent style

👎 Cons

• Hard to customize
• Looks mediocre if you don't customize