The class Attribute

Technical Deep Dive & Specifications

WHATWG Class Specification & Token Parsing

According to the WHATWG HTML Living Standard:

• The class attribute assigns one or more class names to an element.
• The attribute value is parsed as a set of space-separated tokens (ASCII whitespace: space, tab, line-feed, form-feed, carriage-return).
• Consecutive whitespace characters are collapsed, and leading/trailing whitespace is ignored.

<!-- The browser parses this as three distinct tokens: ["card", "elevated", "active"] -->
<div class="  card   elevated     active  "></div>

The BEM (Block, Element, Modifier) Architecture

To keep large codebases scalable and prevent CSS selector specificity escalation, frontend teams widely adopt BEM:

.block__element--modifier
  |        |          |
  |        |          +---> Modifier: Represents state or variation (e.g. --active, --disabled)
  |        +--------------> Element: Component child part dependent on block (e.g. __title, __icon)
  +-----------------------> Block: Standalone reusable component entity (e.g. .card, .navbar)

+-------------------------------------------------------------+
|  .card                                                      |
|  +-------------------------------------------------------+  |
|  |  .card__header                                        |  |
|  |  +-------------------------------------------------+  |  |
|  |  |  .card__title                                   |  |  |
|  |  +-------------------------------------------------+  |  |
|  +-------------------------------------------------------+  |
|  +-------------------------------------------------------+  |
|  |  .card__body                                          |  |
|  |  <p>...</p>                                           |  |
|  |  <button class="card__button card__button--primary">  |  |
|  +-------------------------------------------------------+  |
+-------------------------------------------------------------+

BEM Rules & Best Practices:

1. Single Flat Specificity: Every BEM selector is a single class (0, 0, 1, 0), eliminating nested selector specificity wars (.nav ul li a:hover).
2. Never Chain Elements: Never write .card__header__title. If an element is a child inside header, it is still part of the card block: .card__title.
3. Modifiers Define State/Theme: Use double hyphens (--dark, --expanded) or state classes (is-active, is-open).

The DOMTokenList API (element.classList)

In modern JavaScript, the element.classList property returns a live DOMTokenList representing the element's space-separated tokens.

const banner = document.querySelector(".banner");

// Safe atomic manipulation:
banner.classList.add("banner--highlight", "is-visible");
banner.classList.remove("is-hidden");

// Conditional toggle (force param):
const isDarkMode = true;
banner.classList.toggle("theme-dark", isDarkMode); // Adds if true, removes if false

// Fast token replacement:
banner.classList.replace("status-pending", "status-approved");

// Inspection:
if (banner.classList.contains("is-visible")) {
  console.log("Banner is actively displayed");
}

className vs. classList: The Overwrite Hazard

const el = document.querySelector("div");
// Initial markup: <div class="badge badge--success is-active">

// DANGEROUS: element.className is a raw string!
el.className = "is-disabled"; 
// Result: <div class="is-disabled">
// (All previous classes were wiped out!)

// SAFE: element.classList operates on individual tokens
el.classList.add("is-disabled");
// Result: <div class="badge badge--success is-active is-disabled">

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 13–24 (.toast): Defines the Block styles with consistent padding and theme base.
• Lines 27–42 (.toast__message, .toast__action): Defines Elements scoped cleanly to the .toast block.
• Lines 45–56 (.toast--success, .toast--error, .toast--dismissed): Defines Modifiers for visual status and dynamic animation states.
• Lines 76–89 (toast.classList.replace): Uses modern DOMTokenList.replace() to atomically swap between .toast--success and .toast--error without string concatenation bugs.

Expected Browser Render Output

+-------------------------------------------------------------+
| | Deployment completed successfully in 14.2s.             × |
+-------------------------------------------------------------+
(Green border on the left. Clicking 'Toggle Error/Success State' swaps to Red border)