Learning CSS - Integrating CSS with Modern HTML and JS

#Introduction

Episode 20 covered CSS architectures inside a stylesheet file. Episode 21 shifts focus to integration: how CSS lives alongside JavaScript and modern frameworks that render HTML dynamically. The modern ecosystem offers several models: CSS Modules that isolate classes per component, CSS-in-JS that brings styles into component code, and browser APIs like classList and custom properties that bridge CSS and JS. Why does it matter? Nearly all web applications are now built with components. How CSS is organized and invoked determines whether components can be reused without name collisions and whether UI state can change smoothly.

#CSS Modules

CSS Modules turn classes into unique names per file at build time, preventing name collisions between components:

Card.jsx

import styles from "./Card.module.css";
export default function Card() {
  return (
    <div className={styles.kartu}>
      <h2>Kartu Modul</h2>
      <button className={styles.tombol}>Aksi</button>
    </div>
  );
}

The kartu and tombol classes are transformed into unique names like _kartu_1f2a3b. Two components can use the same class names without conflict because the build output is always different. This structure works in frameworks like Next.js and Vite without extra configuration.

#CSS-in-JS

CSS-in-JS writes styles directly inside components, usually with tagged templates:

styled.jsx

import styled from "styled-components";
const Tombol = styled.button`
  background-color: #2563eb;
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
  border: none;
  &:hover {
    background-color: #1d4ed8;
  }
`;
export default function Aksi() {
  return <Tombol>Kirim</Tombol>;
}

Styles live in the same place as the markup, can receive props, and are scoped to the component. The downside: CSS is rendered at runtime and adds to the JavaScript bundle size. Other libraries like Emotion and vanilla-extract offer different trade-offs — vanilla-extract even generates static CSS files at build time.

#Class Manipulation with ClassList

For changing states, JavaScript controls classes through classList:

script.js

const menu = document.getElementById("menu");
const toggle = document.getElementById("toggle");
toggle.addEventListener("click", () => {
  menu.classList.toggle("terbuka");
});

classList.add, remove, and toggle switch CSS states safely — without writing inline styles. Combining class with CSS rules keeps state centralized in one place and easy to animate.

#Dataset and Custom Properties from JavaScript

Custom properties can be read and changed from JavaScript as a bridge for dynamic values:

progress.js

const bar = document.getElementById("bar");
const atur = document.getElementById("atur");
atur.addEventListener("click", () => {
  bar.style.setProperty("--progres", "75%");
});

style.setProperty writes a custom property directly to the element, and CSS renders the result. This pattern is common for progress bars, scroll positions, and values that come from runtime data — CSS handles the visuals, JavaScript only supplies numbers.

#Modern CSS Features: Container Queries and :has

Two modern features change how components are integrated:

Container queries adapt styles based on the container's size, not the viewport. The same component can look different in a narrow sidebar and a wide content area — the boundary of responsiveness now moves to the component itself.

The :has() selector picks elements that contain something. The code above gives a green border to forms with a checked checkbox and highlights cards that have a special tag — entirely without JavaScript.

#Exercise: A Component-Responsive Card

script.js

const kartu = document.getElementById("kartu");
const toggle = document.getElementById("toggle");
toggle.addEventListener("click", () => {
  kartu.classList.toggle("aktif");
  const aktif = kartu.classList.contains("aktif");
  toggle.textContent = aktif ? "Nonaktifkan" : "Tandai Aktif";
});

Run npx serve . and click the button. classList swaps the card's state, while :has() makes the button change color without a single conditional line. CSS and JS work together with clear responsibilities.

CSS Modules isolate classes per component at build time.
CSS-in-JS places styles inside components, with performance trade-offs.
classList swaps UI state safely and centrally.
Custom properties can be written from JavaScript via style.setProperty.
Container queries respond to component size, not the viewport.
:has() selects elements based on their contents without JavaScript. In the next episode, episode 22, we'll cover CSS performance and optimal rendering — speeding up rendering, avoiding layout shift, and preparing stylesheets for production.

Learning CSS - Integrating CSS with Modern HTML and JS

#Introduction

#CSS Modules

#CSS-in-JS

#Class Manipulation with ClassList

#Dataset and Custom Properties from JavaScript

#Modern CSS Features: Container Queries and :has

#Exercise: A Component-Responsive Card

#Common Mistakes and Solutions

#Inline Styles for Everything

#Chaotic Classes Without a Pattern

#Container Queries on Every Element

#Closing