<!-- Bad — divs everywhere ("div soup") -->
<div class="header">
    <div class="nav">...</div>
</div>
<div class="main">
    <div class="article">...</div>
    <div class="sidebar">...</div>
</div>

<!-- Good — semantic elements -->
<header>
    <nav aria-label="Main navigation">...</nav>
</header>
<main>
    <article>...</article>
    <aside>...</aside>
</main>
<footer>...</footer>

<!-- Role — what the element is -->
<div role="alert">Error: invalid email</div>

<!-- States — current condition -->
<button aria-expanded="false" aria-controls="menu">Menu</button>

<!-- Properties — relationships -->
<input aria-labelledby="name-label" aria-describedby="name-hint" />
<label id="name-label">Full Name</label>
<span id="name-hint">As it appears on your passport</span>

<!-- Live regions — announce dynamic changes -->
<div aria-live="polite" aria-atomic="true">
    3 items in cart
</div>

.box {
    /* Content dimensions */
    width: 200px;
    height: 100px;
    
    /* Padding — inside the border */
    padding: 20px;
    
    /* Border */
    border: 2px solid #333;
    
    /* Margin — outside the border */
    margin: 16px;
    
    /* box-sizing changes how width/height are calculated */
    box-sizing: border-box; /* width includes padding + border */
    /* vs content-box (default): width is content only */
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* Specificity: 0,0,1,1 */
p.intro { color: blue; }

/* Specificity: 0,1,0,0 — wins */
#content { color: red; }

/* Specificity: 0,0,2,0 */
.nav .link { color: green; }

.container {
    display: flex;
    flex-direction: row;       /* main axis: horizontal */
    justify-content: space-between; /* distribute along main axis */
    align-items: center;       /* align along cross axis */
    gap: 16px;                 /* space between items */
    flex-wrap: wrap;           /* allow wrapping */
}

.item {
    flex: 1;                   /* grow to fill space equally */
    /* flex: grow shrink basis */
    flex: 0 0 200px;           /* don't grow, don't shrink, 200px wide */
}

justify-content (main axis):
┌──────────────────────────────────────┐
│ [A]     [B]     [C]                  │  flex-start
│     [A]     [B]     [C]             │  center
│          [A]     [B]     [C]        │  flex-end
│ [A]         [B]         [C]         │  space-between
│   [A]      [B]      [C]            │  space-around
│   [A]     [B]     [C]              │  space-evenly
└──────────────────────────────────────┘

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-template-rows: auto 1fr auto;     /* header, content, footer */
    gap: 16px;
}

/* Named areas */
.layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-columns: 250px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

/* Static (default) — normal flow */
position: static;

/* Relative — offset from normal position, still in flow */
position: relative;
top: 10px; left: 20px;

/* Absolute — removed from flow, relative to nearest positioned ancestor */
position: absolute;
top: 0; right: 0;

/* Fixed — relative to viewport, stays on scroll */
position: fixed;
bottom: 20px; right: 20px;

/* Sticky — relative until scroll threshold, then fixed */
position: sticky;
top: 0; /* sticks when scrolled to top */

/* Mobile-first approach: base styles are mobile */
.container {
    padding: 16px;
}

/* Tablet */
@media (min-width: 768px) {
    .container {
        padding: 24px;
        max-width: 720px;
        margin: 0 auto;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
}

/* Large desktop */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
}

/* clamp(min, preferred, max) */
h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
    /* Never smaller than 1.5rem, never larger than 3rem */
    /* Scales with viewport width in between */
}

body {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

.card-container {
    container-type: inline-size;
    container-name: card;
}

@container card (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 150px 1fr;
    }
}

@container card (max-width: 399px) {
    .card {
        display: flex;
        flex-direction: column;
    }
}

<!-- srcset for resolution switching -->
<img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 33vw"
    alt="Description"
/>

<!-- picture for art direction -->
<picture>
    <source media="(min-width: 1024px)" srcset="hero-wide.jpg" />
    <source media="(min-width: 768px)" srcset="hero-medium.jpg" />
    <img src="hero-mobile.jpg" alt="Hero image" />
</picture>

/* Block — standalone component */
.card { }

/* Element — part of a block (double underscore) */
.card__title { }
.card__image { }
.card__body { }

/* Modifier — variation (double hyphen) */
.card--featured { }
.card__title--large { }

<article class="card card--featured">
    <img class="card__image" src="..." alt="..." />
    <h2 class="card__title card__title--large">Title</h2>
    <p class="card__body">Content</p>
</article>

/* Button.module.css */
.button {
    padding: 8px 16px;
    border-radius: 4px;
}
.primary {
    background: blue;
    color: white;
}

import styles from './Button.module.css';
// styles.button → "Button_button_x7ks2" (unique hash)

<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    Click me
</button>

/* Promote to own layer for cheap animations */
.animated {
    will-change: transform;
    /* or: transform: translateZ(0); */
}

/* Animate only transform and opacity for 60fps */
.card {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.card:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* Avoid: animating width, height, top, left — triggers layout */

<!-- Preload critical resources -->
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin />
<link rel="preload" href="/hero.jpg" as="image" />

<!-- Defer non-critical JS -->
<script src="analytics.js" defer></script>

<!-- Lazy load images -->
<img src="photo.jpg" loading="lazy" alt="..." />

<!-- Inline critical CSS -->
<style>
    /* Above-the-fold styles inlined here */
</style>
<link rel="stylesheet" href="full.css" media="print" onload="this.media='all'" />

// Dynamic import — load on demand
const module = await import('./heavy-feature.js');

// Route-based splitting (framework-level)
const Dashboard = lazy(() => import('./pages/Dashboard'));

const observer = new IntersectionObserver(
    (entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target); // stop observing
            }
        });
    },
    { threshold: 0.1 } // trigger when 10% visible
);

document.querySelectorAll('.animate-on-scroll').forEach(el => {
    observer.observe(el);
});

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ data: largeDataset });
worker.onmessage = (event) => {
    console.log('Result:', event.data);
};

// worker.js
self.onmessage = (event) => {
    const result = heavyComputation(event.data);
    self.postMessage(result);
};

// Register
navigator.serviceWorker.register('/sw.js');

// sw.js — cache-first strategy
self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request).then(cached => {
            return cached || fetch(event.request).then(response => {
                const clone = response.clone();
                caches.open('v1').then(cache => cache.put(event.request, clone));
                return response;
            });
        })
    );
});

// React example
const [count, setCount] = useState(0);

// Vue example
const count = ref(0);

// Pinia (Vue) / Zustand (React) pattern
const useCartStore = defineStore('cart', () => {
    const items = ref([]);
    const total = computed(() => items.value.reduce((sum, i) => sum + i.price, 0));
    
    function addItem(item) { items.value.push(item); }
    function removeItem(id) { items.value = items.value.filter(i => i.id !== id); }
    
    return { items, total, addItem, removeItem };
});

// math.js
export function add(a, b) { return a + b; }
export function multiply(a, b) { return a * b; } // unused

// app.js
import { add } from './math.js';
// multiply is tree-shaken out of the bundle