[React Basics] Effective and Optimal Styling in React

When building a React application, giving your components a visual identity with CSS is just as important as writing their logic. But in React, styling is not a one-way street. It’s like a maze with many options, each with its own pros and cons.

This article will walk you through the most popular styling methods in React, from traditional approaches to the most modern and powerful techniques. Let’s find the style that best fits your project!

1. CSS/SASS Stylesheets (The Classic)

This is the most familiar approach for anyone who has done web development. You create a separate .css or .scss file, write CSS as usual, and import it into your component.

How it works:

/* styles.css */
.card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

.card-title {
  font-size: 1.5rem;
  color: #333;
}

// Card.js
import React from 'react'
import './styles.css' // Import CSS file

function Card({ title, children }) {
  return (
    <div className="card">
      <h2 className="card-title">{title}</h2>
      <p>{children}</p>
    </div>
  )
}

export default Card

✅ Pros:

• Easy to approach: Very familiar, no need to learn new syntax.
• Clear separation: Logic (JS) and presentation (CSS) are completely separated.
• Preprocessing support: Works perfectly with SASS, LESS.

❌ Cons:

• Class name conflicts (Global Scope): All classes are in the global scope. As the project grows, naming and managing classes to avoid duplication becomes a nightmare.
• Hard to manage: It’s hard to know which class is used in which component and vice versa. Deleting a class can cause unexpected errors elsewhere.

2. Inline Styles (The Quick & Dirty)

React allows you to write styles directly in the component as a JavaScript object.

How it works:

import React from 'react'

function Header() {
  const headerStyle = {
    backgroundColor: 'navy',
    color: 'white',
    padding: '1rem',
    textAlign: 'center', // CSS properties are written in camelCase
  }

  return (
    <header style={headerStyle}>
      <h1>Welcome to My App</h1>
    </header>
  )
}

export default Header

✅ Pros:

• Quick: Great for prototyping or applying dynamic styles based on state or props.
• Local scope: Styles only affect that element, never causing conflicts.

❌ Cons:

• Limited: Doesn’t support advanced CSS features like pseudo-classes (:hover), media queries, or animations.
• Hard to read: Mixing styles and logic makes the component messy.
• Performance: Can cause performance issues if misused, as a new style object is created on every render.

3. CSS Modules (The Local Hero)

CSS Modules are a revolution. Basically, it’s a regular CSS file, but when built, it automatically generates unique class names. This completely solves the global scope problem.

How it works:

You need to name the file [name].module.css (e.g., Button.module.css).

/* Button.module.css */
.button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

// Button.js
import React from 'react'
import styles from './Button.module.css' // Import as a module

function Button({ children }) {
  // `styles.button` will be transformed into a unique class, e.g., "Button_button__1a2b3c"
  return <button className={styles.button}>{children}</button>
}

export default Button

✅ Pros:

• Local scope by default: No more worries about class name conflicts.
• Easy to maintain: Styles are packaged with the component, easy to manage and remove.
• All CSS features available: You still write pure CSS, so there are no limitations.

❌ Cons:

• Setup: Requires build tool support (like Webpack, Vite), but Create React App and modern frameworks support it out of the box.
• Harder to share styles: Sharing styles between different components is a bit more complex.

4. CSS-in-JS (The Dynamic Powerhouse) 🚀

This is a completely different approach: writing CSS right inside your JavaScript file using specialized libraries. It lets you leverage the full power of JavaScript (variables, functions, logic) to create highly flexible and dynamic styles.

The two most popular libraries are Styled-components and Emotion.

Styled-components

How it works:

You create React components with attached styles using JavaScript’s template literal syntax.

import React from 'react'
import styled from 'styled-components'

// Create a <Wrapper> component as a styled <section>
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`

// Create a <Title> component as a styled <h1>
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`

function MyComponent() {
  return (
    <Wrapper>
      <Title>Hello World!</Title>
    </Wrapper>
  )
}

✅ Pros:

• Component-first thinking: Style and component are unified, making reuse and management extremely easy.
• Powerful dynamic styling: Easily change styles based on props in a natural and powerful way.
• Automatic vendor prefixing: The library handles browser prefixes for you.
• No more class names: You don’t have to worry about naming classes anymore.

❌ Cons:

• Learning curve: Takes time to get used to the new syntax and way of thinking.
• Performance overhead: There’s a slight runtime cost compared to static CSS, though libraries are well optimized.
• Library dependency: You need to install and manage an external library.

5. Utility-First CSS (The Modern Minimalist)

This is a hot trend, with Tailwind CSS as the most prominent representative. Instead of writing CSS for each component, Tailwind gives you a huge collection of low-level utility classes, each doing one thing (e.g., p-4 for padding, flex for display: flex, text-center for text-align: center). You build your UI by combining these classes directly in JSX.

How it works:

import React from 'react'

function ProductCard() {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg p-6 bg-white hover:bg-gray-100 transition-colors">
      <div className="font-bold text-xl mb-2">The Coldest Sunset</div>
      <p className="text-gray-700 text-base">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
        quia, nulla!
      </p>
    </div>
  )
}

✅ Pros:

• Super fast development: No need to leave your HTML/JSX file, no need to name classes.
• Consistency: Your design will always be consistent because you only use predefined values from Tailwind’s design system.
• Tiny CSS file: Tailwind scans your code and only generates the classes you actually use in the final CSS file.
• Intuitive responsive: Handle responsiveness directly in JSX (md:flex, lg:text-xl).

❌ Cons:

• Messy JSX: The class list can get very long and hard to read for complex components.
• Learning curve: You have to learn and remember Tailwind’s utility class names.
• Less creative freedom: Limits your creative freedom compared to writing pure CSS.

Styling in React: Quick Comparison Table

Here’s a quick comparison table of styling methods in React:

Conclusion: Which path is for you?

There’s no “absolutely best” answer. The choice of styling method depends on your project’s scale, technical requirements, and your team’s preferences.

• Just starting out? Start with traditional CSS/SASS to master the basics, then move to CSS Modules to experience the power of local scope.
• Building a complex, highly interactive app? CSS-in-JS (Styled-components/Emotion) will be your powerful companion.
• Prioritizing development speed and design consistency? Tailwind CSS is a must-try option.

Styling in React is not just about “dressing up” your components. It’s about how you architect your UI, manage complexity, and enhance user experience. Experiment, explore, and find the style that helps you and your team work most efficiently and happily!