Course Outline (Part 40)

Welcome to Part 40 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore CSS-in-JS vs CSS Modules vs Utility-first.

In the modern JavaScript ecosystem, writing CSS has evolved far beyond maintaining a single styles.css file. Different frameworks and philosophies have introduced unique workflows for writing and compiling styles. In this part, we will compare CSS Modules, utility-first frameworks, and CSS-in-JS to understand their pros, cons, and performance trade-offs.

Chapter 200: CSS Modules (Scoped Styles)

CSS Modules is a build system feature (supported by Vite, Webpack, and Next.js) that scopes class names locally by default to prevent naming collisions.

1. How CSS Modules Work

You write standard CSS in a file named Component.module.css. During compilation, the builder hashes the class names:

/* Card.module.css */
.cardTitle {
  color: #3b82f6;
  font-size: 1.5rem;
}

In your JavaScript component:

import styles from './Card.module.css';

function Card() {
  return <h2 className={styles.cardTitle}>My Title</h2>;
}

The compiled HTML looks like this, preventing conflicts with other .cardTitle selectors in other components:

<h2 class="_cardTitle_ab921">My Title</h2>

Chapter 201: Utility-First CSS (Tailwind Philosophy)

Utility-first CSS involves styling elements entirely by combining tiny, single-purpose helper classes directly in the markup, rather than writing custom selectors in external stylesheets.

2. The Utility-First Approach

Instead of creating a .card class with dozens of rules, you combine pre-defined classes:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="text-xl font-medium text-black">ChitChat</div>
</div>

3. Pros and Cons of Utility CSS

  • Pros: You don’t waste time inventing class names, CSS file sizes remain small because utilities are reused, and you make layout changes without leaving your HTML files.
  • Cons: Markup can look cluttered and hard to read, and you must learn the specific framework syntax.

Chapter 202: CSS-in-JS (Styled Components)

Popularized by React, CSS-in-JS embeds CSS rules directly inside JavaScript files, often styling components using template literals.

2. Styling components with Styled Components

Using libraries like Styled Components:

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => props.$primary ? '#3b82f6' : '#94a3b8'};
  color: white;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;

3. Runtime vs. Zero-Runtime CSS-in-JS

  • Runtime CSS-in-JS: The library generates and injects style tags in the DOM at runtime. This allows dynamic styling based on component state/props, but introduces slight JavaScript execution overhead.
  • Zero-Runtime CSS-in-JS: Libraries (like Linaria or Vanilla Extract) extract styles into static CSS files during build time, combining the benefits of CSS-in-JS with the speed of standard CSS.

Chapter 203: Methodologies Practice & Self-Check

1. Practice Exercises

  1. Exercise 1: Stylistic Comparison: Recreate a simple button component with three different implementations: using BEM styled CSS Modules, utility class approximations, and a pseudo CSS-in-JS styled component block. Compare readability.

2. Self-Check Questions

  1. What file extension signifies a CSS Module?
    • Answer: .module.css.
  2. How are naming collisions prevented in CSS Modules?
    • Answer: The build compiler automatically adds a unique hash suffix to the class name during compilation.
  3. What styling philosophy is associated with Tailwind CSS?
    • Answer: Utility-first CSS.
  4. Why do utility-first projects produce small CSS bundles?
    • Answer: Because the class names are static and reused extensively across different elements instead of creating new custom CSS rules.
  5. What library popularized CSS-in-JS inside React?
    • Answer: Styled Components (or Emotion).
  6. How does runtime CSS-in-JS handle dynamic property styling?
    • Answer: It parses component props in JavaScript and updates the CSS style definitions injected in the document head dynamically.
  7. What is zero-runtime CSS-in-JS?
    • Answer: A methodology where you write CSS inside JavaScript, but a compiler extracts it into static CSS files during build time to eliminate browser runtime overhead.
  8. Can you mix CSS Modules with regular CSS?
    • Answer: Yes, CSS Modules only scope classes local to imports, leaving global styles unaffected.
  9. What is the main drawback of runtime CSS-in-JS libraries on low-end devices?
    • Answer: The JavaScript parse, compilation, and style-tag insertion steps add thread blocking delays.
  10. Which methodology avoids inventing arbitrary CSS class names completely?
    • Answer: Utility-first CSS (classes are pre-defined utility names).

Discussion

Loading comments...