Unit 11: Styling in React

Styling in React has experienced one of the most intense evolutions in modern web development. In traditional web development, the separation of concerns was defined by file technologies: HTML for markup, CSS for styling, and JavaScript for behavior. React fundamentally challenged this assumption by introducing component-driven development, unifying markup and behavior into cohesive, modular units.

However, CSS was designed in the 1990s as a document-based language with a global cascading namespace. By default, every CSS class declared in any stylesheet applies globally across the entire DOM tree. In large-scale React applications with hundreds of components, this creates profound friction: class name collisions, unintended specificity overrides, and dead code accumulation.

The Five Major Styling Paradigms

The most direct way to style a React component is to write a conventional stylesheet (e.g., Button.css) and import it directly into your component module:
import './Button.css';

How Bundlers Process CSS Imports

In tools like Vite or Webpack, importing a CSS file does not scope the styles to the importing component. Instead, the bundler extracts the CSS rules, compiles them, and injects them into a global <style> tag inside the document <head> (or bundles them into an external styles.css file during production builds).

Mitigation Strategy: BEM Methodology

When teams use plain CSS files, they must strictly follow naming conventions such as BEM (Block, Element, Modifier) to prevent collisions:
.c-button { ... } • .c-button__icon { ... } • .c-button--primary { ... }.

CSS Modules provide the ideal bridge between traditional CSS authorship and React's component encapsulation. Supported natively by modern bundlers (including Vite, Next.js, and Create React App) with zero configuration, CSS Modules eliminate global namespace collisions without introducing any JavaScript runtime overhead.

Naming Convention & Compilation Mechanics

To create a CSS Module, name your file with the .module.css suffix: e.g., Header.module.css. In your React component, import the stylesheet as a default object:
import styles from './Header.module.css';

/* Header.module.css */
.banner {
  background: #0284c7;
  padding: 16px;
  border-radius: 8px;
}

.title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}

/* Header.jsx */
import React from 'react';
import styles from './Header.module.css';

export function HeaderBanner({ heading }) {
  // Classes are guaranteed 100% unique across the entire application
  return (
    <div className={styles.banner}>
      <h2 className={styles.title}>{heading}</h2>
    </div>
  );
}

In React, the style attribute does not accept a raw CSS string (unlike standard HTML). Instead, it accepts a plain JavaScript object where CSS properties are written in camelCase:

Severe Architectural Limitations of Inline Styles

While inline styles provide instant scoping, they are intentionally restricted by the browser's CSSOM:

• No Pseudo-Classes: You cannot declare :hover, :focus, :active, or :visited states inline.
• No Pseudo-Elements: You cannot create ::before or ::after decorations.
• No Media Queries: You cannot author responsive breakpoints (@media (max-width: 768px)) inside an inline style object.
• Performance Penalty: Defining an object literal inline (style={{ padding: 16 }}) allocates a brand-new object in memory on every render pass, triggering garbage collection and failing shallow prop equality checks.

CSS-in-JS emerged as a paradigm where styles are defined directly within component JavaScript files. The most prominent implementation is Styled Components (which utilizes ES6 Tagged Template Literals).

npm install styled-components

How Styled Components Work

Styled Components creates a React component with styling attached to it. It supports full CSS syntax (including pseudo-classes, animations, and media queries) and allows styles to dynamically adapt based on incoming props:

import styled from 'styled-components';

// Creates an actual <button> element with attached unique class
export const CustomButton = styled.button`
  background: ${(props) => (props.$primary ? '#0284c7' : '#e2e8f0')};
  color: ${(props) => (props.$primary ? '#ffffff' : '#0f172a')};
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background: ${(props) => (props.$primary ? '#0369a1' : '#cbd5e1')};
  }

  @media (max-width: 768px) {
    width: 100%;
  }
`;

// Consumed directly as a regular React component:
// <CustomButton $primary>Submit Order</CustomButton>

The Runtime Performance Trade-Off

While Styled Components offers unparalleled developer ergonomics, it incurs a measurable runtime cost: on every render pass where props mutate, the Styled Components engine must parse the template literal string, hash the styles, generate a new CSS class name, and inject it into the browser DOM stylesheet. In modern high-throughput apps, this has driven a migration toward zero-runtime alternatives like Tailwind CSS.

Tailwind CSS is a utility-first CSS framework that has become the dominant styling solution in the React ecosystem. Rather than writing custom CSS files or inventing class names, developers compose low-level, atomic utility classes directly inside JSX className attributes.

The Just-In-Time (JIT) Compiler Architecture

Tailwind's compiler scans all .jsx, .tsx, and .html files in your project. It detects every utility class name you author and generates strictly the CSS rules you actually use into a compact, optimized stylesheet. If your project uses only 50 distinct Tailwind classes, your production CSS bundle will be less than 8 kilobytes!

// Clean, responsive, dark-mode ready Tailwind component
export function FeatureCard({ title, description }) {
  return (
    <div className="p-6 max-w-sm mx-auto bg-white dark:bg-slate-800 rounded-xl shadow-md border border-slate-200 dark:border-slate-700 transition hover:shadow-lg">
      <div className="text-xl font-bold text-slate-900 dark:text-white mb-2">
        {title}
      </div>
      <p className="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">
        {description}
      </p>
      <button className="mt-4 px-4 py-2 bg-sky-600 hover:bg-sky-700 active:bg-sky-800 text-white text-sm font-semibold rounded-md shadow focus:outline-none focus:ring-2 focus:ring-sky-500">
        Explore Details
      </button>
    </div>
  );
}

Building complex UI components—such as modal dialogs, accessible datepickers, multi-select dropdowns, and data grids—from scratch requires hundreds of hours of CSS and accessibility engineering. Many enterprises adopt pre-built component libraries:

Responsive web design ensures user interfaces adapt seamlessly across smartphones, tablets, laptops, and ultra-wide desktop monitors. Modern React engineering enforces a mobile-first approach: base CSS styles are written for small viewports first, and media query breakpoints progressively enhance the layout as screen real estate expands.

Standard Responsive Breakpoints

• Small (sm): min-width: 640px — Large mobile phones and small phablets.
• Medium (md): min-width: 768px — Tablets in portrait orientation.
• Large (lg): min-width: 1024px — Tablets in landscape and standard laptops.
• Extra Large (xl): min-width: 1280px — High-resolution desktop monitors.

Modern operating systems and users expect websites to support dynamic Dark Mode and Light Mode toggling. A professional theme architecture requires three coordinated subsystems:

1. Design Tokens via CSS Custom Properties: Abstracting colors into CSS variables (e.g., --bg-surface, --text-primary) mapped to a data attribute or class.
2. System Preference Detection: Automatically detecting OS-level preferences using the browser media query: window.matchMedia('(prefers-color-scheme: dark)').
3. Persistent State Storage: Persisting the user's manual preference in localStorage so their selected theme survives page reloads.

import React, { createContext, useContext, useState, useEffect } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  // 1. Initialize state reading from localStorage or falling back to OS system preference
  const [theme, setTheme] = useState(() => {
    const saved = localStorage.getItem('app_theme');
    if (saved) return saved;
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  });

  // 2. Synchronize theme change to root HTML attribute and localStorage
  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('app_theme', theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme((prev) => (prev === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeContext);

/* Global CSS Tokens */
:root {
  --bg-main: #ffffff;
  --bg-card: #f8fafc;
  --text-main: #0f172a;
  --border-color: #e2e8f0;
}

/* Dark Mode Token Override */
[data-theme='dark'] {
  --bg-main: #090d16;
  --bg-card: #111726;
  --text-main: #f8fafc;
  --border-color: #1e293b;
}

/* Components simply consume variables: */
.card {
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}