Lab 14: CSS Architecture & BEM

Objective

Write maintainable, scalable CSS using the BEM methodology, CSS cascade layers, utility classes, logical properties, and print styles — the professional practices that separate hobby projects from production codebases.

Background

As CSS grows beyond 1000 lines, naming conflicts, specificity wars, and tangled styles become common. CSS architecture solves this with methodologies (BEM), modern cascade control (@layer), and structured organization. This lab teaches the patterns used in large-scale production CSS.

Time

30 minutes

Prerequisites

Lab 12: CSS Variables & Theming

Tools

docker run --rm -it -v /tmp:/workspace zchencow/innozverse-htmlcss:latest bash

Lab Instructions

Step 1: BEM Methodology

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BEM Methodology</title>
  <style>
    /* BEM: Block__Element--Modifier */

    /* BLOCK: a standalone component */
    .card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      max-width: 320px;
      font-family: sans-serif;
    }

    /* ELEMENT: part of the block, prefixed with __ */
    .card__image {
      height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
      background: linear-gradient(135deg, #667eea, #764ba2);
    }
    .card__body { padding: 20px; }
    .card__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: #2d3436; }
    .card__text { font-size: 0.9rem; color: #636e72; line-height: 1.5; margin-bottom: 16px; }
    .card__footer { display: flex; justify-content: space-between; align-items: center; }
    .card__price { font-size: 1.3rem; font-weight: 700; color: #e17055; }

    /* MODIFIER: variation of block or element, prefixed with -- */
    .card--featured { box-shadow: 0 8px 30px rgba(102,126,234,0.3); border: 2px solid #667eea; }
    .card--horizontal { display: flex; max-width: 500px; }
    .card--horizontal .card__image { width: 140px; height: auto; min-height: 120px; flex-shrink: 0; }

    .card__title--large { font-size: 1.4rem; }
    .card__price--sale { color: #e74c3c; }
    .card__price--original { text-decoration: line-through; color: #b2bec3; font-size: 0.9rem; }

    /* BUTTON BLOCK */
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-size: 0.9rem; font-weight: 600; }
    .btn--primary { background: #667eea; color: white; }
    .btn--outline { background: transparent; border: 2px solid #667eea; color: #667eea; }
    .btn--sm { padding: 6px 14px; font-size: 0.8rem; }
    .btn__icon { font-size: 1rem; }

    body { background: #f4f6f8; padding: 30px; display: flex; gap: 20px; flex-wrap: wrap; }
  </style>
</head>
<body>
  <!-- Standard card (Block) -->
  <div class="card">
    <div class="card__image">🎧</div>
    <div class="card__body">
      <h2 class="card__title">Standard Card</h2>
      <p class="card__text">This is the base card block with elements: image, body, title, text, footer.</p>
      <div class="card__footer">
        <span class="card__price">$139.99</span>
        <button class="btn btn--primary btn--sm">
          <span class="btn__icon">🛒</span>
          Buy
        </button>
      </div>
    </div>
  </div>

  <!-- Featured card (Block + Modifier) -->
  <div class="card card--featured">
    <div class="card__image" style="background:linear-gradient(135deg,#f5576c,#f093fb)">🌟</div>
    <div class="card__body">
      <h2 class="card__title card__title--large">Featured Card</h2>
      <p class="card__text">The <code>card--featured</code> modifier adds the highlighted border and shadow.</p>
      <div class="card__footer">
        <div>
          <div class="card__price card__price--original">$199.99</div>
          <div class="card__price card__price--sale">$99.99</div>
        </div>
        <button class="btn btn--outline btn--sm">Details</button>
      </div>
    </div>
  </div>
</body>
</html>

Write this file:

cat > /tmp/css-arch-step1.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>BEM Methodology</title>
  <style>
    /* BLOCK */
    .card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); max-width: 320px; font-family: sans-serif; }
    /* ELEMENTS */
    .card__image { height: 180px; display: flex; align-items: center; justify-content: center; font-size: 4rem; background: linear-gradient(135deg,#667eea,#764ba2); }
    .card__body { padding: 20px; }
    .card__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
    .card__text { font-size: 0.9rem; color: #636e72; margin-bottom: 16px; }
    .card__footer { display: flex; justify-content: space-between; align-items: center; }
    .card__price { font-size: 1.3rem; font-weight: 700; color: #e17055; }
    /* MODIFIERS */
    .card--featured { box-shadow: 0 8px 30px rgba(102,126,234,0.3); border: 2px solid #667eea; }
    .btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; }
    .btn--primary { background: #667eea; color: white; }
    .btn--sm { padding: 6px 14px; font-size: 0.8rem; }
    body { background: #f4f6f8; padding: 30px; display: flex; gap: 20px; flex-wrap: wrap; }
  </style>
</head>
<body>
  <div class="card">
    <div class="card__image">🎧</div>
    <div class="card__body">
      <h2 class="card__title">Standard Card</h2>
      <p class="card__text">Base card block with elements.</p>
      <div class="card__footer">
        <span class="card__price">$139.99</span>
        <button class="btn btn--primary btn--sm">🛒 Buy</button>
      </div>
    </div>
  </div>
  <div class="card card--featured">
    <div class="card__image" style="background:linear-gradient(135deg,#f5576c,#f093fb)">🌟</div>
    <div class="card__body">
      <h2 class="card__title">Featured Card</h2>
      <p class="card__text">card--featured modifier adds highlight border.</p>
      <div class="card__footer">
        <span class="card__price">$99.99</span>
        <button class="btn btn--primary btn--sm">Details</button>
      </div>
    </div>
  </div>
</body>
</html>
EOF

💡 BEM stands for Block__Element--Modifier. Block = standalone component (.card). Element = part of block (.card__title). Modifier = variation (.card--featured). BEM classes are long but self-documenting — you know exactly where .card__title--large lives without reading the HTML. No specificity wars because all selectors have equal specificity (single class).

📸 Verified Output:

docker run --rm -v /tmp:/workspace zchencow/innozverse-htmlcss:latest node -e "
const fs = require('fs');
const html = fs.readFileSync('/workspace/css-arch-step1.html', 'utf8');
console.log(html.includes('card__') ? '✓ BEM element classes found' : '✗ Missing BEM elements');
console.log(html.includes('card--') ? '✓ BEM modifier classes found' : '✗ Missing BEM modifiers');
console.log(html.includes('btn--') ? '✓ Button BEM modifiers' : '✗ Missing btn modifiers');
"
✓ BEM element classes found
✓ BEM modifier classes found
✓ Button BEM modifiers

Step 2: CSS Specificity & The Cascade

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Specificity</title>
  <style>
    body { font-family: sans-serif; padding: 30px; max-width: 700px; }
    /* Specificity values: (inline, id, class, element)
       element = 0,0,0,1
       class   = 0,0,1,0
       id      = 0,1,0,0
       inline  = 1,0,0,0
    */

    /* (0,0,0,1) = 1 */
    p { color: gray; }

    /* (0,0,1,0) = 10 */
    .highlight { color: blue; }

    /* (0,0,1,1) = 11 */
    p.highlight { color: green; }

    /* (0,1,0,0) = 100 */
    #special { color: red; }

    /* Same specificity: LAST ONE WINS (cascade order) */
    .box-a { background: lightblue; padding: 10px; margin: 8px; }
    .box-b { background: lightyellow; padding: 10px; margin: 8px; }
    /* Both have same specificity (0,0,1,0) */
    /* box-b wins because it comes AFTER box-a in the stylesheet */

    /* !important: nuclear option — avoid in production */
    .forced { color: purple !important; }

    /* Specificity layers example */
    .card { border: 2px solid blue; }
    .card.active { border-color: green; }       /* Higher specificity wins */
    div#special-card { border-color: red; }      /* ID beats class+class */

    .demo-table { border-collapse: collapse; width: 100%; margin-top: 16px; }
    .demo-table th, .demo-table td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    .demo-table th { background: #f8f9fa; }
  </style>
</head>
<body>
  <h2>CSS Specificity Rules</h2>
  <p>Gray (element selector = 1)</p>
  <p class="highlight">Blue if only class (10), Green with p.highlight (11)</p>
  <p id="special">Red — ID selector (100) beats class (10)</p>
  <p class="highlight forced">Purple — !important overrides everything (use sparingly!)</p>

  <h3 style="margin-top:20px">Specificity Calculator</h3>
  <table class="demo-table">
    <thead><tr><th>Selector</th><th>Specificity</th><th>Points</th></tr></thead>
    <tbody>
      <tr><td><code>p</code></td><td>(0,0,0,1)</td><td>1</td></tr>
      <tr><td><code>.card</code></td><td>(0,0,1,0)</td><td>10</td></tr>
      <tr><td><code>p.card</code></td><td>(0,0,1,1)</td><td>11</td></tr>
      <tr><td><code>#hero</code></td><td>(0,1,0,0)</td><td>100</td></tr>
      <tr><td><code>style="..."</code></td><td>(1,0,0,0)</td><td>1000</td></tr>
      <tr><td><code>!important</code></td><td>Overrides all</td><td>∞</td></tr>
    </tbody>
  </table>

  <h3 style="margin-top:20px">How to Win Specificity Wars</h3>
  <ul style="line-height:2">
    <li>Use classes (not IDs) for styling</li>
    <li>Keep selectors as simple as possible</li>
    <li>Avoid <code>!important</code> — use it only for utilities</li>
    <li>Use <code>:where()</code> to reduce specificity: <code>:where(.card) p</code> = (0,0,0,1)</li>
    <li>Use <code>:is()</code> for convenient grouping without extra specificity</li>
  </ul>
</body>
</html>

Write this file:

cat > /tmp/css-arch-step2.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Specificity</title>
  <style>
    body { font-family: sans-serif; padding: 30px; max-width: 700px; }
    p { color: gray; }
    .highlight { color: blue; }
    p.highlight { color: green; }
    #special { color: red; }
    .forced { color: purple !important; }
    table { border-collapse: collapse; width: 100%; margin-top: 16px; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background: #f8f9fa; }
  </style>
</head>
<body>
  <h2>CSS Specificity</h2>
  <p>Gray — element (1)</p>
  <p class="highlight">Green — p.highlight beats .highlight (11 vs 10)</p>
  <p id="special">Red — ID (100) beats class (10)</p>
  <p class="highlight forced">Purple — !important overrides all</p>
  <table>
    <tr><th>Selector</th><th>Specificity</th><th>Points</th></tr>
    <tr><td>p</td><td>(0,0,0,1)</td><td>1</td></tr>
    <tr><td>.card</td><td>(0,0,1,0)</td><td>10</td></tr>
    <tr><td>#hero</td><td>(0,1,0,0)</td><td>100</td></tr>
    <tr><td>style=""</td><td>(1,0,0,0)</td><td>1000</td></tr>
    <tr><td>!important</td><td>Overrides all</td><td>∞</td></tr>
  </table>
</body>
</html>
EOF

💡 Specificity formula: Count (inline, ID, class/attr/pseudo-class, element/pseudo-element). Higher number wins. Same specificity? Last declaration wins (cascade order). Keep specificity flat — prefer single classes. The "specificity war" anti-pattern: chaining classes to override other classes, leading to ever-escalating selectors.

📸 Verified Output:

docker run --rm -v /tmp:/workspace zchencow/innozverse-htmlcss:latest node -e "
const fs = require('fs');
const html = fs.readFileSync('/workspace/css-arch-step2.html', 'utf8');
console.log(html.includes('!important') ? '✓ !important demo found' : '✗ Missing');
console.log(html.includes('Specificity') ? '✓ Specificity content found' : '✗ Missing');
"
✓ !important demo found
✓ Specificity content found

Step 3: CSS Cascade Layers (@layer)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Layers</title>
  <style>
    /* Declare layer order — lower layers have lower priority */
    @layer reset, base, components, utilities, overrides;

    /* RESET layer — lowest priority */
    @layer reset {
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      button { font: inherit; cursor: pointer; }
    }

    /* BASE layer — foundational styles */
    @layer base {
      body { font-family: sans-serif; line-height: 1.5; color: #2d3436; background: #f8f9fa; padding: 30px; }
      h1, h2, h3 { font-weight: 700; line-height: 1.2; }
      h1 { font-size: 2rem; margin-bottom: 8px; }
      h2 { font-size: 1.5rem; margin-bottom: 8px; }
      a { color: #667eea; }
    }

    /* COMPONENTS layer */
    @layer components {
      .card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 16px; }
      .btn { background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; }
      .badge { background: #e0e7ff; color: #667eea; padding: 2px 8px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
    }

    /* UTILITIES layer — should override components */
    @layer utilities {
      .bg-red { background: #e74c3c !important; } /* !important within layer only overrides same layer */
      .text-white { color: white; }
      .p-4 { padding: 16px; }
      .mt-4 { margin-top: 16px; }
      .rounded-full { border-radius: 9999px; }
    }

    /* OVERRIDES layer — highest priority (no !important needed!) */
    @layer overrides {
      .emergency { background: #c0392b; color: white; }
    }

    /* Unlayered CSS always beats layered CSS */
    .super-important { border: 3px solid gold; }
  </style>
</head>
<body>
  <h1>CSS Cascade Layers</h1>
  <div class="card">
    <h2>How @layer Works</h2>
    <p>Layers give us explicit control over the cascade without specificity wars. Order of declaration determines layer priority — <em>later layers win</em>.</p>
    <p class="mt-4">Layer priority (lowest → highest): reset → base → components → utilities → overrides → unlayered</p>
  </div>
  <div class="card">
    <h2>Layer Demonstration</h2>
    <p>This button is from the <code>components</code> layer:</p>
    <button class="btn mt-4">Component Button</button>
    <p class="mt-4">This one has utilities applied too:</p>
    <button class="btn mt-4 rounded-full">Utility Pill Button</button>
    <p class="mt-4">Emergency override (from <code>overrides</code> layer, beats components without !important):</p>
    <div class="card emergency mt-4">🚨 This card uses .emergency from overrides layer</div>
  </div>
</body>
</html>

Write this file:

cat > /tmp/css-arch-step3.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Layers</title>
  <style>
    @layer reset, base, components, utilities;
    @layer reset { *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } }
    @layer base { body { font-family: sans-serif; line-height: 1.5; color: #2d3436; background: #f8f9fa; padding: 30px; } h2 { font-size: 1.5rem; margin-bottom: 8px; } }
    @layer components { .card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 16px; } .btn { background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 6px; font-weight: 600; } }
    @layer utilities { .mt-4 { margin-top: 16px; } .rounded-full { border-radius: 9999px; } .bg-red { background: #e74c3c; color: white; } }
  </style>
</head>
<body>
  <h2>CSS Cascade Layers (@layer)</h2>
  <div class="card">
    <p>Layers control cascade without specificity wars. Later layers beat earlier ones.</p>
    <p>Priority: reset → base → components → utilities → unlayered</p>
  </div>
  <div class="card">
    <button class="btn">Component Button</button>
    <button class="btn rounded-full mt-4">Utility Pill (utilities layer overrides components)</button>
    <div class="card bg-red mt-4">Utilities layer overrides components layer.</div>
  </div>
</body>
</html>
EOF

💡 @layer solves specificity wars. Declare layer order first: @layer reset, base, components, utilities. Later layers always beat earlier ones, regardless of specificity. Unlayered CSS beats all layers. This means you can write reset rules with high specificity selectors without worrying about overriding component styles.

📸 Verified Output:

docker run --rm -v /tmp:/workspace zchencow/innozverse-htmlcss:latest node -e "
const fs = require('fs');
const html = fs.readFileSync('/workspace/css-arch-step3.html', 'utf8');
console.log(html.includes('@layer') ? '✓ @layer found' : '✗ Missing @layer');
const layers = (html.match(/@layer/g) || []).length;
console.log(layers >= 4 ? '✓ Multiple layers: ' + layers : '✗ Need more layers');
"
✓ @layer found
✓ Multiple layers: 4

Step 4: Utility Classes vs Component Classes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Utility vs Component CSS</title>
  <style>
    /* ===== UTILITY-FIRST APPROACH (Tailwind-style) ===== */
    /* Each class does one thing */
    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .items-center { align-items: center; }
    .justify-between { justify-content: space-between; }
    .gap-4 { gap: 16px; }
    .gap-2 { gap: 8px; }
    .p-4 { padding: 16px; }
    .p-5 { padding: 20px; }
    .px-4 { padding-left: 16px; padding-right: 16px; }
    .py-2 { padding-top: 8px; padding-bottom: 8px; }
    .m-0 { margin: 0; }
    .mb-2 { margin-bottom: 8px; }
    .mb-4 { margin-bottom: 16px; }
    .mt-4 { margin-top: 16px; }
    .w-full { width: 100%; }
    .rounded { border-radius: 8px; }
    .rounded-full { border-radius: 9999px; }
    .bg-white { background: white; }
    .bg-blue { background: #667eea; }
    .bg-gray { background: #f8f9fa; }
    .text-white { color: white; }
    .text-gray { color: #636e72; }
    .text-dark { color: #2d3436; }
    .font-bold { font-weight: 700; }
    .font-semibold { font-weight: 600; }
    .text-sm { font-size: 0.875rem; }
    .text-lg { font-size: 1.125rem; }
    .text-xl { font-size: 1.25rem; }
    .shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .border { border: 1px solid #e9ecef; }
    .overflow-hidden { overflow: hidden; }
    body { font-family: sans-serif; padding: 30px; background: #f0f2f5; }

    /* ===== COMPONENT APPROACH (BEM-style) ===== */
    .product-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .product-card__image { height: 140px; background: linear-gradient(135deg, #43e97b, #38f9d7); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
    .product-card__body { padding: 16px; }
    .product-card__name { font-weight: 700; margin-bottom: 4px; }
    .product-card__price { color: #e17055; font-weight: 700; font-size: 1.1rem; }
  </style>
</head>
<body>
  <h2>Two Approaches to CSS</h2>
  <div class="flex gap-4 mb-4" style="flex-wrap:wrap">
    <!-- UTILITY-FIRST: many small classes in HTML -->
    <div class="bg-white rounded shadow overflow-hidden" style="width:200px">
      <div style="height:140px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:3rem">🎧</div>
      <div class="p-4">
        <div class="font-bold mb-2 text-dark">Utility Card</div>
        <div class="text-gray text-sm mb-4">Many atomic classes in HTML</div>
        <div class="flex items-center justify-between">
          <span class="font-bold" style="color:#e17055">$139.99</span>
          <button class="bg-blue text-white py-2 px-4 rounded-full font-semibold text-sm" style="border:none;cursor:pointer">Buy</button>
        </div>
      </div>
    </div>

    <!-- COMPONENT: semantic classes in CSS, minimal HTML classes -->
    <div class="product-card" style="width:200px">
      <div class="product-card__image">🎸</div>
      <div class="product-card__body">
        <div class="product-card__name">Component Card</div>
        <div class="text-gray text-sm mb-4">Semantic BEM classes in CSS</div>
        <div class="flex items-center justify-between">
          <span class="product-card__price">$89.99</span>
          <button class="bg-blue text-white py-2 px-4 rounded-full font-semibold text-sm" style="border:none;cursor:pointer">Buy</button>
        </div>
      </div>
    </div>
  </div>

  <div class="bg-white rounded shadow p-5 mt-4">
    <h3 class="font-bold mb-4">Comparison</h3>
    <table style="width:100%;border-collapse:collapse">
      <tr style="background:#f8f9fa"><th style="padding:8px;text-align:left;border:1px solid #ddd">Aspect</th><th style="padding:8px;text-align:left;border:1px solid #ddd">Utility-First</th><th style="padding:8px;text-align:left;border:1px solid #ddd">Component (BEM)</th></tr>
      <tr><td style="padding:8px;border:1px solid #ddd">CSS growth</td><td style="padding:8px;border:1px solid #ddd">Minimal — reuse classes</td><td style="padding:8px;border:1px solid #ddd">Grows with components</td></tr>
      <tr><td style="padding:8px;border:1px solid #ddd">HTML verbosity</td><td style="padding:8px;border:1px solid #ddd">Many classes per element</td><td style="padding:8px;border:1px solid #ddd">One semantic class</td></tr>
      <tr><td style="padding:8px;border:1px solid #ddd">Consistency</td><td style="padding:8px;border:1px solid #ddd">Constrained by design system</td><td style="padding:8px;border:1px solid #ddd">Explicit component rules</td></tr>
      <tr><td style="padding:8px;border:1px solid #ddd">Best for</td><td style="padding:8px;border:1px solid #ddd">Tailwind, prototyping</td><td style="padding:8px;border:1px solid #ddd">Component libraries</td></tr>
    </table>
  </div>
</body>
</html>

Write this file:

cat > /tmp/css-arch-step4.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Utility vs Component</title>
  <style>
    body { font-family: sans-serif; padding: 30px; background: #f0f2f5; }
    /* Utility classes */
    .flex { display: flex; } .gap-4 { gap: 16px; } .p-4 { padding: 16px; }
    .bg-white { background: white; } .rounded { border-radius: 8px; } .shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .font-bold { font-weight: 700; } .text-sm { font-size: 0.875rem; } .text-gray { color: #636e72; }
    /* Component classes */
    .product-card { background: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); width: 200px; }
    .product-card__image { height: 140px; background: linear-gradient(135deg,#43e97b,#38f9d7); display: flex; align-items: center; justify-content: center; font-size: 3rem; }
    .product-card__body { padding: 16px; }
    .product-card__name { font-weight: 700; margin-bottom: 8px; }
    .product-card__price { color: #e17055; font-weight: 700; }
  </style>
</head>
<body>
  <h2>Utility-First vs Component CSS</h2>
  <div class="flex gap-4" style="flex-wrap:wrap;margin-top:16px">
    <div class="bg-white rounded shadow" style="width:200px;overflow:hidden">
      <div style="height:140px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:3rem">🎧</div>
      <div class="p-4"><div class="font-bold">Utility Card</div><div class="text-sm text-gray">Many atomic classes</div></div>
    </div>
    <div class="product-card">
      <div class="product-card__image">🎸</div>
      <div class="product-card__body"><div class="product-card__name">Component Card</div><div class="product-card__price">$89.99</div></div>
    </div>
  </div>
</body>
</html>
EOF

💡 When to use which: Utility-first (Tailwind) is great for rapid prototyping and small teams — CSS barely grows. Component CSS (BEM) is better for large teams and design systems — HTML stays clean and semantic. Most modern projects use a hybrid: component classes for major UI elements, utilities for spacing/layout tweaks.

📸 Verified Output:

docker run --rm -v /tmp:/workspace zchencow/innozverse-htmlcss:latest node -e "
const fs = require('fs');
const html = fs.readFileSync('/workspace/css-arch-step4.html', 'utf8');
console.log(html.includes('product-card__') ? '✓ BEM component classes' : '✗ Missing BEM');
console.log(html.includes('.flex') ? '✓ Utility classes' : '✗ Missing utilities');
"
✓ BEM component classes
✓ Utility classes

Step 5: CSS Reset & Normalize

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Reset</title>
  <style>
    /* ===== MODERN CSS RESET (Josh Comeau's approach) ===== */
    /* 1. Use border-box everywhere */
    *, *::before, *::after { box-sizing: border-box; }
    /* 2. Remove default margins */
    * { margin: 0; }
    /* 3. Allow percentage-based heights */
    html, body { height: 100%; }
    /* 4. Accessible line-height + font rendering */
    body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
    /* 5. Images are inline by default — make them block */
    img, picture, video, canvas, svg { display: block; max-width: 100%; }
    /* 6. Inherit fonts for inputs */
    input, button, textarea, select { font: inherit; }
    /* 7. Avoid text overflow */
    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
    /* 8. Create a root stacking context */
    #root, #__next { isolation: isolate; }

    /* ===== YOUR STYLES START HERE ===== */
    body { font-family: 'Segoe UI', sans-serif; padding: 30px; color: #2d3436; background: #f8f9fa; }
    h1 { font-size: 2rem; font-weight: 700; margin-bottom: 16px; }
    h2 { font-size: 1.4rem; margin-bottom: 12px; }
    p { margin-bottom: 12px; line-height: 1.6; }
    .demo { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 16px; }
    button { background: #667eea; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; }
    img { border-radius: 8px; }
  </style>
</head>
<body>
  <h1>CSS Reset in Action</h1>
  <div class="demo">
    <h2>After Reset</h2>
    <p>Without a reset, browsers apply default styles that differ between Chrome, Firefox, and Safari. A reset normalizes these to a consistent baseline.</p>
    <p>Key resets: <code>box-sizing: border-box</code> on everything, removed margins, <code>font: inherit</code> on inputs.</p>
    <button>Inherits font from body</button>
  </div>
  <div class="demo">
    <h2>Reset vs Normalize</h2>
    <p><strong>Reset</strong> (like this): strips all browser defaults to zero. You define everything.</p>
    <p><strong>Normalize.css</strong>: preserves useful browser defaults, just makes them consistent. Gentler approach.</p>
    <p><strong>Modern approach</strong>: small targeted reset (8 rules) that fixes only the annoying defaults.</p>
  </div>
</body>
</html>

Write this file:

cat > /tmp/css-arch-step5.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Reset</title>
  <style>
    /* Modern CSS Reset */
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    html, body { height: 100%; }
    body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
    img, picture, video, canvas, svg { display: block; max-width: 100%; }
    input, button, textarea, select { font: inherit; }
    p, h1, h2, h3 { overflow-wrap: break-word; }
    /* Your styles after reset */
    body { font-family: sans-serif; padding: 30px; color: #2d3436; background: #f8f9fa; }
    h1 { font-size: 2rem; font-weight: 700; margin-bottom: 16px; }
    h2 { font-size: 1.4rem; margin-bottom: 12px; }
    p { margin-bottom: 12px; line-height: 1.6; }
    .demo { background: white; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    button { background: #667eea; color: white; padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; }
  </style>
</head>
<body>
  <h1>CSS Reset</h1>
  <div class="demo">
    <h2>After applying reset</h2>
    <p>Cross-browser consistent baseline. box-sizing: border-box on everything. Removed default margins. font: inherit on form elements.</p>
    <button>Button inherits font from body</button>
  </div>
  <div class="demo">
    <h2>Reset vs Normalize</h2>
    <p>Reset: strips all defaults to zero. Normalize: preserves useful defaults, makes them consistent. Modern: 8 targeted rules fixing only annoying defaults.</p>
  </div>
</body>
</html>
EOF

💡 Every project needs a reset. Without one, you'll fight browser inconsistencies constantly. The 8-rule modern reset above (box-sizing, margin: 0, font: inherit, etc.) is minimal and solves 95% of cross-browser issues. Add it as your first CSS.

📸 Verified Output:

docker run --rm -v /tmp:/workspace zchencow/innozverse-htmlcss:latest node -e "
const fs = require('fs');
const html = fs.readFileSync('/workspace/css-arch-step5.html', 'utf8');
console.log(html.includes('box-sizing: border-box') ? '✓ box-sizing reset found' : '✗ Missing reset');
console.log(html.includes('font: inherit') ? '✓ font inherit found' : '✗ Missing font inherit');
"
✓ box-sizing reset found
✓ font inherit found

Step 6: CSS Logical Properties

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Logical Properties</title>
  <style>
    body { font-family: sans-serif; padding: 30px; max-width: 700px; }
    .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
    .demo-box { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    h3 { margin-bottom: 12px; font-size: 1rem; color: #636e72; }
    /* Physical properties (avoid for i18n) */
    .physical {
      margin-left: 20px;
      margin-right: 20px;
      padding-top: 16px;
      padding-bottom: 16px;
      border-left: 4px solid #667eea;
      text-align: left;
    }
    /* Logical properties (flow-relative) */
    .logical {
      margin-inline: 20px;        /* margin-left + margin-right */
      padding-block: 16px;        /* padding-top + padding-bottom */
      border-inline-start: 4px solid #e74c3c; /* border-left in LTR, border-right in RTL */
      text-align: start;          /* left in LTR, right in RTL */
    }
    /* Logical sizing */
    .sizing-demo { margin-top: 20px; }
    .box { background: #f0f2f5; border-radius: 4px; padding: 12px; margin-block-end: 8px; }
    /* Logical values reference table */
    table { border-collapse: collapse; width: 100%; margin-top: 20px; font-size: 0.9rem; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: start; }
    th { background: #f8f9fa; }
    code { background: #f0f2f5; padding: 2px 6px; border-radius: 4px; font-size: 0.85rem; }
  </style>
</head>
<body>
  <h2>CSS Logical Properties</h2>
  <p style="margin-block-end:20px">Logical properties use flow-relative directions (inline/block) instead of physical ones (left/right/top/bottom). They automatically flip for RTL languages.</p>

  <div class="comparison">
    <div class="demo-box">
      <h3>Physical (avoid for i18n)</h3>
      <div class="physical">
        <code>margin-left</code>, <code>padding-top</code>, <code>border-left</code>
        <p>Breaks in RTL!</p>
      </div>
    </div>
    <div class="demo-box">
      <h3>Logical (i18n friendly)</h3>
      <div class="logical">
        <code>margin-inline</code>, <code>padding-block</code>, <code>border-inline-start</code>
        <p>Works in RTL automatically!</p>
      </div>
    </div>
  </div>

  <div class="demo-box sizing-demo">
    <h3>Logical Sizing</h3>
    <div class="box" style="inline-size: 80%">inline-size: 80% (= width in horizontal writing)</div>
    <div class="box" style="max-inline-size: 400px">max-inline-size: 400px (= max-width)</div>
    <div class="box" style="block-size: 60px">block-size: 60px (= height)</div>
  </div>

  <table>
    <tr><th>Physical</th><th>Logical Equivalent</th></tr>
    <tr><td><code>width</code></td><td><code>inline-size</code></td></tr>
    <tr><td><code>height</code></td><td><code>block-size</code></td></tr>
    <tr><td><code>margin-top/bottom</code></td><td><code>margin-block</code></td></tr>
    <tr><td><code>margin-left/right</code></td><td><code>margin-inline</code></td></tr>
    <tr><td><code>padding-top</code></td><td><code>padding-block-start</code></td></tr>
    <tr><td><code>border-left</code></td><td><code>border-inline-start</code></td></tr>
    <tr><td><code>text-align: left</code></td><td><code>text-align: start</code></td></tr>
  </table>
</body>
</html>

Write this file:

cat > /tmp/css-arch-step6.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Logical Properties</title>
  <style>
    body { font-family: sans-serif; padding: 30px; max-width: 700px; }
    .demo { background: white; border-radius: 8px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin-bottom: 16px; }
    .logical-demo { margin-inline: 20px; padding-block: 16px; border-inline-start: 4px solid #e74c3c; background: #f8f9fa; }
    table { border-collapse: collapse; width: 100%; margin-top: 16px; font-size: 0.9rem; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: start; }
    th { background: #f8f9fa; }
  </style>
</head>
<body>
  <h2>CSS Logical Properties</h2>
  <div class="demo">
    <h3>Logical vs Physical</h3>
    <div class="logical-demo">
      <p>margin-inline (LR), padding-block (TB), border-inline-start (left in LTR, right in RTL)</p>
    </div>
  </div>
  <table>
    <tr><th>Physical</th><th>Logical</th></tr>
    <tr><td>width</td><td>inline-size</td></tr>
    <tr><td>height</td><td>block-size</td></tr>
    <tr><td>margin-top/bottom</td><td>margin-block</td></tr>
    <tr><td>margin-left/right</td><td>margin-inline</td></tr>
    <tr><td>border-left</td><td>border-inline-start</td></tr>
    <tr><td>text-align: left</td><td>text-align: start</td></tr>
  </table>
</body>
</html>
EOF

💡 Logical properties future-proof your CSS for internationalization. margin-inline-start means "start side of the inline axis" — left in English (LTR), right in Arabic (RTL). If you ever need to support RTL languages, logical properties mean zero changes to your layout CSS. Use text-align: start instead of text-align: left as a habit.

📸 Verified Output:

docker run --rm -v /tmp:/workspace zchencow/innozverse-htmlcss:latest node -e "
const fs = require('fs');
const html = fs.readFileSync('/workspace/css-arch-step6.html', 'utf8');
console.log(html.includes('margin-inline') ? '✓ margin-inline found' : '✗ Missing logical props');
console.log(html.includes('inline-size') ? '✓ inline-size found' : '✗ Missing inline-size');
"
✓ margin-inline found
✓ inline-size found

Step 7: Print Styles

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Print Styles</title>
  <style>
    /* Screen styles */
    body { font-family: 'Segoe UI', sans-serif; padding: 20px; background: #f0f2f5; color: #2d3436; }
    header { background: #2c3e50; color: white; padding: 16px 24px; border-radius: 8px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
    nav { background: #34495e; padding: 8px 24px; border-radius: 8px; margin-bottom: 20px; }
    nav a { color: white; text-decoration: none; margin-right: 16px; }
    .btn { background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; }
    .card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .ads { background: #ffeaa7; border: 2px dashed #fdcb6e; padding: 20px; text-align: center; border-radius: 8px; margin-bottom: 16px; }

    /* ===== PRINT STYLES ===== */
    @media print {
      /* Reset backgrounds — ink saving */
      *, *::before, *::after { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; }
      /* Body layout for print */
      body { font-size: 12pt; line-height: 1.4; padding: 0; }
      /* Remove screen-only elements */
      nav, .btn, .ads, .no-print { display: none !important; }
      /* Keep header but black */
      header { border: 2px solid black; padding: 10pt; margin-bottom: 12pt; border-radius: 0; }
      /* Cards: remove shadow, add border */
      .card { border: 1px solid #ccc; break-inside: avoid; margin-bottom: 12pt; border-radius: 0; }
      /* Links: show URLs */
      a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #444 !important; }
      a[href^="#"]::after { content: ""; } /* Don't show internal links */
      /* Page settings */
      @page { margin: 1in; }
      @page :first { margin-top: 0.5in; }
      /* Avoid page breaks inside headings */
      h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
      /* Force page break before certain elements */
      .page-break { break-before: page; }
    }
  </style>
</head>
<body>
  <header>
    <h1>InnoZverse Docs</h1>
    <button class="btn">Login</button>
  </header>
  <nav>
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
  </nav>
  <div class="ads">📢 Advertisement — This won't print!</div>
  <div class="card">
    <h2>CSS Architecture Guide</h2>
    <p>This card will print with a border instead of a shadow. The background becomes transparent to save ink. Read more at <a href="https://css-tricks.com">CSS-Tricks</a>.</p>
  </div>
  <div class="card">
    <h2>Print Tips</h2>
    <ul style="padding-left:20px;line-height:2">
      <li>Nav, ads, and buttons are hidden</li>
      <li>Link URLs are shown inline</li>
      <li>Cards get borders instead of shadows</li>
      <li>Font size is 12pt for paper</li>
      <li>Margins set to 1 inch via @page</li>
    </ul>
  </div>
  <p style="color:#636e72;font-size:0.85rem">Use Ctrl+P (Windows) or Cmd+P (Mac) to preview the print output.</p>
</body>
</html>

Write this file:

cat > /tmp/css-arch-step7.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Print Styles</title>
  <style>
    body { font-family: sans-serif; padding: 20px; background: #f0f2f5; }
    header { background: #2c3e50; color: white; padding: 16px 24px; border-radius: 8px; margin-bottom: 20px; }
    nav { background: #34495e; padding: 8px 24px; border-radius: 8px; margin-bottom: 20px; }
    nav a { color: white; text-decoration: none; margin-right: 16px; }
    .btn { background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; }
    .card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .ads { background: #ffeaa7; border: 2px dashed #fdcb6e; padding: 20px; text-align: center; margin-bottom: 16px; }
    @media print {
      *, *::before, *::after { background: transparent !important; color: black !important; box-shadow: none !important; }
      body { font-size: 12pt; padding: 0; }
      nav, .btn, .ads { display: none !important; }
      header { border: 2px solid black; padding: 10pt; }
      .card { border: 1px solid #ccc; break-inside: avoid; margin-bottom: 12pt; }
      a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
      a[href^="#"]::after { content: ""; }
      @page { margin: 1in; }
      h2 { break-after: avoid; }
    }
  </style>
</head>
<body>
  <header><h1>InnoZverse Docs</h1><button class="btn">Login</button></header>
  <nav><a href="#">Home</a><a href="#">Docs</a><a href="#">Blog</a></nav>
  <div class="ads">📢 Ad — Won't print!</div>
  <div class="card"><h2>CSS Architecture Guide</h2><p>Cards get borders, not shadows in print. <a href="https://css-tricks.com">CSS-Tricks</a></p></div>
  <div class="card"><h2>Print Tips</h2><p>Nav/ads hidden, link URLs shown, 12pt font, 1in margins.</p></div>
</body>
</html>
EOF

💡 Every serious website needs print styles. Users print receipts, articles, and documentation. Key rules: hide nav/ads/buttons, remove shadows/backgrounds (ink savings), show link URLs with ::after, use break-inside: avoid to prevent cards splitting across pages, and set @page { margin: 1in } for proper margins.

📸 Verified Output:

docker run --rm -v /tmp:/workspace zchencow/innozverse-htmlcss:latest node -e "
const fs = require('fs');
const html = fs.readFileSync('/workspace/css-arch-step7.html', 'utf8');
console.log(html.includes('@media print') ? '✓ Print media query found' : '✗ Missing print styles');
console.log(html.includes('@page') ? '✓ @page rule found' : '✗ Missing @page');
console.log(html.includes('break-inside') ? '✓ break-inside found' : '✗ Missing break-inside');
"
✓ Print media query found
✓ @page rule found
✓ break-inside found

Step 8: Capstone — Well-Organized Component Stylesheet

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BEM Architecture Capstone</title>
  <style>
    /* ================================================
       CSS ARCHITECTURE CAPSTONE
       Structure: @layer → Reset → Tokens → Base →
                  Components (BEM) → Utilities → Print
    ================================================ */

    /* 1. LAYER ORDER */
    @layer reset, tokens, base, components, utilities;

    /* 2. RESET */
    @layer reset {
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
      img, picture, video, canvas, svg { display: block; max-width: 100%; }
      input, button, textarea, select { font: inherit; }
    }

    /* 3. DESIGN TOKENS */
    @layer tokens {
      :root {
        --color-primary: #667eea;
        --color-primary-hover: #5a6fd6;
        --color-success: #00b894;
        --color-danger: #e74c3c;
        --color-text: #2d3436;
        --color-text-muted: #636e72;
        --color-bg: #f0f2f5;
        --color-surface: #ffffff;
        --color-border: #e9ecef;
        --space-1: 4px; --space-2: 8px; --space-3: 12px;
        --space-4: 16px; --space-5: 20px; --space-6: 24px;
        --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
        --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
        --font-sans: 'Segoe UI', system-ui, sans-serif;
      }
    }

    /* 4. BASE */
    @layer base {
      body { font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); padding: var(--space-6); }
      h1, h2, h3 { line-height: 1.2; font-weight: 700; }
      a { color: var(--color-primary); }
      :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); }
    }

    /* 5. COMPONENTS (BEM) */
    @layer components {
      /* === PAGE HEADER BLOCK === */
      .page-header { margin-block-end: var(--space-6); }
      .page-header__title { font-size: clamp(1.5rem, 4vw, 2.5rem); color: var(--color-text); margin-block-end: var(--space-2); }
      .page-header__subtitle { color: var(--color-text-muted); font-size: 1rem; }

      /* === CARD BLOCK === */
      .card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
      .card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-block-end: var(--space-4); }
      .card__title { font-size: 1rem; font-weight: 700; color: var(--color-text); }
      .card__body { color: var(--color-text-muted); font-size: 0.9rem; line-height: 1.6; }
      .card__footer { margin-block-start: var(--space-4); display: flex; gap: var(--space-2); }
      .card--elevated { box-shadow: var(--shadow-md); }
      .card--bordered { border-color: var(--color-primary); }

      /* === BUTTON BLOCK === */
      .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: none; border-radius: var(--radius-md); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: opacity 0.2s, transform 0.15s; text-decoration: none; }
      .btn:hover { opacity: 0.88; transform: translateY(-1px); }
      .btn__icon { font-size: 1rem; }
      .btn--primary { background: var(--color-primary); color: white; }
      .btn--success { background: var(--color-success); color: white; }
      .btn--danger  { background: var(--color-danger);  color: white; }
      .btn--ghost   { background: transparent; color: var(--color-text); }
      .btn--ghost:hover { background: var(--color-border); }
      .btn--sm { padding: var(--space-1) var(--space-3); font-size: 0.8rem; }
      .btn--lg { padding: var(--space-3) var(--space-6); font-size: 1rem; }

      /* === BADGE BLOCK === */
      .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: 9999px; font-size: 0.75rem; font-weight: 700; }
      .badge--primary { background: rgba(102,126,234,0.12); color: var(--color-primary); }
      .badge--success { background: rgba(0,184,148,0.12); color: var(--color-success); }
      .badge--danger  { background: rgba(231,76,60,0.12);  color: var(--color-danger); }

      /* === GRID LAYOUT BLOCK === */
      .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
    }

    /* 6. UTILITIES */
    @layer utilities {
      .mt-4 { margin-block-start: var(--space-4); }
      .mb-4 { margin-block-end: var(--space-4); }
      .text-muted { color: var(--color-text-muted); }
      .text-sm { font-size: 0.875rem; }
      .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    }

    /* 7. PRINT */
    @media print {
      *, *::before, *::after { background: transparent !important; box-shadow: none !important; }
      .btn, nav { display: none !important; }
      .card { border: 1px solid #ccc !important; break-inside: avoid; }
      @page { margin: 1in; }
    }
  </style>
</head>
<body>
  <div class="page-header">
    <h1 class="page-header__title">CSS Architecture Capstone</h1>
    <p class="page-header__subtitle">BEM + @layer + Design Tokens + Logical Properties + Print</p>
  </div>

  <div class="card-grid">
    <div class="card card--elevated">
      <div class="card__header">
        <h2 class="card__title">Analytics Dashboard</h2>
        <span class="badge badge--success">● Live</span>
      </div>
      <div class="card__body">
        Real-time metrics for your application. Using BEM elements and modifiers for structured, conflict-free CSS.
      </div>
      <div class="card__footer">
        <a href="#" class="btn btn--primary">
          <span class="btn__icon">📊</span>
          View Report
        </a>
        <button class="btn btn--ghost btn--sm">Export</button>
      </div>
    </div>

    <div class="card">
      <div class="card__header">
        <h2 class="card__title">Deployments</h2>
        <span class="badge badge--primary">12 Active</span>
      </div>
      <div class="card__body">
        All services running smoothly. Last deployment was 2 hours ago with zero downtime.
      </div>
      <div class="card__footer">
        <button class="btn btn--success btn--sm">
          <span class="btn__icon">🚀</span>
          Deploy
        </button>
        <button class="btn btn--ghost btn--sm">Rollback</button>
      </div>
    </div>

    <div class="card card--bordered">
      <div class="card__header">
        <h2 class="card__title">Alerts</h2>
        <span class="badge badge--danger">2 Critical</span>
      </div>
      <div class="card__body">
        Two critical alerts require immediate attention. Response time SLA breach detected in EU-West region.
      </div>
      <div class="card__footer">
        <button class="btn btn--danger btn--sm">Resolve</button>
        <button class="btn btn--ghost btn--sm">Dismiss</button>
      </div>
    </div>
  </div>
</body>
</html>

Write this file:

cat > /tmp/css-architecture.html << 'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Architecture Capstone</title>
  <style>
    @layer reset, tokens, base, components, utilities;
    @layer reset { *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { line-height: 1.5; } img, picture { display: block; max-width: 100%; } input, button { font: inherit; } }
    @layer tokens { :root { --color-primary: #667eea; --color-success: #00b894; --color-danger: #e74c3c; --color-text: #2d3436; --color-muted: #636e72; --color-bg: #f0f2f5; --color-surface: #fff; --color-border: #e9ecef; --space-2: 8px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); } }
    @layer base { body { font-family: system-ui, sans-serif; background: var(--color-bg); color: var(--color-text); padding: var(--space-6); } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } }
    @layer components {
      /* BEM: card block */
      .card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
      .card__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-4); }
      .card__title { font-size: 1rem; font-weight: 700; }
      .card__body { color: var(--color-muted); font-size: 0.9rem; line-height: 1.6; }
      .card__footer { margin-top: var(--space-4); display: flex; gap: var(--space-2); }
      .card--elevated { box-shadow: var(--shadow-md); }
      .card--bordered { border-color: var(--color-primary); }
      /* BEM: btn block */
      .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: none; border-radius: var(--radius-md); font-weight: 600; font-size: 0.9rem; cursor: pointer; }
      .btn--primary { background: var(--color-primary); color: white; }
      .btn--success { background: var(--color-success); color: white; }
      .btn--danger  { background: var(--color-danger);  color: white; }
      .btn--ghost   { background: transparent; color: var(--color-text); }
      .btn--sm { padding: 4px 12px; font-size: 0.8rem; }
      /* BEM: badge block */
      .badge { display: inline-flex; padding: 2px var(--space-2); border-radius: 9999px; font-size: 0.75rem; font-weight: 700; }
      .badge--primary { background: rgba(102,126,234,0.12); color: var(--color-primary); }
      .badge--success { background: rgba(0,184,148,0.12); color: var(--color-success); }
      .badge--danger  { background: rgba(231,76,60,0.12);  color: var(--color-danger); }
      /* Layout */
      .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
      .page-header { margin-bottom: var(--space-6); }
      .page-header__title { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; margin-bottom: 8px; }
      .page-header__subtitle { color: var(--color-muted); }
    }
    @layer utilities { .text-muted { color: var(--color-muted); } .text-sm { font-size: 0.875rem; } }
    @media print { *, *::before, *::after { background: transparent !important; box-shadow: none !important; } .btn { display: none !important; } .card { border: 1px solid #ccc !important; break-inside: avoid; } @page { margin: 1in; } }
  </style>
</head>
<body>
  <div class="page-header">
    <h1 class="page-header__title">CSS Architecture Capstone</h1>
    <p class="page-header__subtitle">@layer + BEM + Design Tokens + Logical Properties + Print Styles</p>
  </div>
  <div class="card-grid">
    <div class="card card--elevated">
      <div class="card__header"><h2 class="card__title">Analytics</h2><span class="badge badge--success">● Live</span></div>
      <div class="card__body">Real-time metrics using BEM elements and modifiers for structured CSS.</div>
      <div class="card__footer"><button class="btn btn--primary">📊 View Report</button><button class="btn btn--ghost btn--sm">Export</button></div>
    </div>
    <div class="card">
      <div class="card__header"><h2 class="card__title">Deployments</h2><span class="badge badge--primary">12 Active</span></div>
      <div class="card__body">All services running. Last deploy 2 hours ago with zero downtime.</div>
      <div class="card__footer"><button class="btn btn--success btn--sm">🚀 Deploy</button><button class="btn btn--ghost btn--sm">Rollback</button></div>
    </div>
    <div class="card card--bordered">
      <div class="card__header"><h2 class="card__title">Alerts</h2><span class="badge badge--danger">2 Critical</span></div>
      <div class="card__body">Two critical alerts require immediate attention.</div>
      <div class="card__footer"><button class="btn btn--danger btn--sm">Resolve</button><button class="btn btn--ghost btn--sm">Dismiss</button></div>
    </div>
  </div>
</body>
</html>
EOF

💡 Capstone architecture summary: @layer controls cascade order → Design tokens define all values → BEM names all components → Logical properties enable RTL → Print styles make it paper-ready. This structure scales to 100K lines of CSS without specificity conflicts or cascade surprises. Real-world frameworks like Bootstrap, Tailwind, and Open Props use variations of this exact pattern.

📸 Verified Output:

docker run --rm -v /tmp:/workspace zchencow/innozverse-htmlcss:latest node -e "
const fs = require('fs');
const html = fs.readFileSync('/workspace/css-architecture.html', 'utf8');
console.log(html.includes('@layer') ? '✓ @layer found' : '✗ Missing @layer');
console.log(html.includes('card__') ? '✓ BEM elements found' : '✗ Missing BEM');
console.log(html.includes('var(--') ? '✓ Design tokens used' : '✗ Missing tokens');
console.log(html.includes('@media print') ? '✓ Print styles found' : '✗ Missing print');
"
✓ @layer found
✓ BEM elements found
✓ Design tokens used
✓ Print styles found

Verification

docker run --rm -v /tmp:/workspace zchencow/innozverse-htmlcss:latest node -e "
const fs = require('fs');
const checks = [
  ['css-arch-step1.html', 'card__'],
  ['css-arch-step2.html', '!important'],
  ['css-arch-step3.html', '@layer'],
  ['css-arch-step4.html', '.flex'],
  ['css-arch-step5.html', 'box-sizing'],
  ['css-arch-step6.html', 'margin-inline'],
  ['css-arch-step7.html', '@media print'],
  ['css-architecture.html', 'card--'],
];
checks.forEach(([file, check]) => {
  try {
    const html = fs.readFileSync('/workspace/' + file, 'utf8');
    console.log(html.includes(check) ? '✓ ' + file : '✗ ' + file);
  } catch(e) { console.log('✗ ' + file + ' not found'); }
});
"

Summary

Practice

Tool

Benefit

BEM naming

.block__element--modifier

Self-documenting, no conflicts

Specificity

Prefer single classes

No specificity wars

@layer

@layer reset, base, components

Explicit cascade control

Utility classes

.flex, .mt-4

Rapid, consistent tweaks

CSS Reset

8-rule modern reset

Cross-browser consistency

Logical properties

margin-inline, inline-size

RTL-ready layout

Print styles

@media print

Paper-friendly output

Good afternoon

Lab 14: CSS Architecture & BEM

Objective

Background

Time

Prerequisites

Tools

Lab Instructions

Step 1: BEM Methodology

Step 2: CSS Specificity & The Cascade

Step 3: CSS Cascade Layers (@layer)

Step 4: Utility Classes vs Component Classes

Step 5: CSS Reset & Normalize

Step 6: CSS Logical Properties

Step 7: Print Styles

Step 8: Capstone — Well-Organized Component Stylesheet

Verification

Summary

Further Reading

Good afternoon

hashtagObjective

hashtagBackground

hashtagTime

hashtagPrerequisites

hashtagTools

hashtagLab Instructions

hashtagStep 1: BEM Methodology

hashtagStep 2: CSS Specificity & The Cascade

hashtagStep 3: CSS Cascade Layers (@layer)

hashtagStep 4: Utility Classes vs Component Classes

hashtagStep 5: CSS Reset & Normalize

hashtagStep 6: CSS Logical Properties

hashtagStep 7: Print Styles

hashtagStep 8: Capstone — Well-Organized Component Stylesheet

hashtagVerification

hashtagSummary

hashtagFurther Reading

Objective

Background

Time

Prerequisites

Tools

Lab Instructions

Step 1: BEM Methodology

Step 2: CSS Specificity & The Cascade

Step 3: CSS Cascade Layers (@layer)

Step 4: Utility Classes vs Component Classes

Step 5: CSS Reset & Normalize

Step 6: CSS Logical Properties

Step 7: Print Styles

Step 8: Capstone — Well-Organized Component Stylesheet

Verification

Summary

Further Reading