`, `

`) rather than generic `

` and ``. Semantic markup improves accessibility, SEO, and maintainability. 2. **Responsive by Default** -- Design for all viewports from the start using fluid units, modern layout systems, and progressive enhancement rather than retrofitting breakpoints. 3. **Accessibility as a Requirement** -- Every interface must be navigable by keyboard, screen reader, and assistive technology. ARIA supplements semantic HTML; it does not replace it. 4. **CSS Layout over Hacks** -- Use Grid and Flexbox for layout. Avoid floats, negative margins, and absolute positioning for page-level structure. 5. **Progressive Enhancement** -- Build a functional baseline with HTML, layer on styling with CSS, and enhance with JavaScript only when necessary. --- ## Semantic HTML5 Structure Use landmark elements to define page regions. Screen readers and search engines rely on this hierarchy. ```html

Article Heading

Section Title

Content goes here.

``` See [semantic-html-patterns](references/semantic-html-patterns.md) for: form patterns, table markup, meta tags, SEO elements, and content sectioning rules. --- ## CSS Grid Layout Grid is the primary tool for two-dimensional layouts. Define explicit tracks or let the browser auto-place items. ```css /* Responsive card grid with auto-fit */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; padding: 1.5rem; } /* Named grid areas for page layout */ .page-layout { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto; min-height: 100dvh; } .page-layout > header { grid-area: header; } .page-layout > aside { grid-area: sidebar; } .page-layout > main { grid-area: main; } .page-layout > footer { grid-area: footer; } ``` See [css-grid-patterns](references/css-grid-patterns.md) for: named areas, auto-fit vs auto-fill, subgrid, implicit tracks, and responsive grid recipes. --- ## Flexbox Patterns Flexbox handles one-dimensional alignment and distribution. Use it for component-level layout within grid cells. ```css /* Navigation bar */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; gap: 1rem; } /* Centering content vertically and horizontally */ .centered-container { display: flex; align-items: center; justify-content: center; min-height: 100dvh; } /* Card with footer pinned to bottom */ .card { display: flex; flex-direction: column; min-height: 300px; } .card__body { flex: 1 1 auto; } .card__footer { flex: 0 0 auto; margin-top: auto; } ``` See [flexbox-patterns](references/flexbox-patterns.md) for: flex-grow/shrink/basis, wrapping, order, alignment edge cases, and common layout recipes. --- ## Responsive Design Combine fluid units, modern CSS functions, and breakpoints. Prefer intrinsic sizing before reaching for media queries. ```css /* Fluid typography with clamp() */ h1 { font-size: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); line-height: 1.2; } p { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.6; max-width: 65ch; } /* Container queries for component-level responsiveness */ .card-wrapper { container-type: inline-size; container-name: card; } @container card (min-width: 400px) { .card { flex-direction: row; } .card__image { width: 40%; } } /* Standard breakpoint media queries */ @media (max-width: 768px) { .page-layout { grid-template-areas: "header" "main" "sidebar" "footer"; grid-template-columns: 1fr; } } ``` See [responsive-design-patterns](references/responsive-design-patterns.md) for: breakpoint strategies, fluid images, responsive tables, container queries, and `prefers-*` media features. --- ## Accessibility Supplement semantic HTML with ARIA only when native elements cannot express the required role or state. ```html ``` See [accessibility-patterns](references/accessibility-patterns.md) for: ARIA roles and properties, keyboard navigation, focus management, color contrast, and screen reader testing. --- ## BEM Naming Convention Block-Element-Modifier keeps CSS selectors flat, predictable, and collision-free. ```css .card { } /* Block */ .card__title { } /* Element -- part of the block */ .card__body { } .card--featured { } /* Modifier -- variation */ .nav__link--active { /* Real-world modifier */ font-weight: 700; border-bottom: 2px solid currentColor; } ``` --- ## Anti-Patterns | Avoid | Use Instead | |---|---| | `

` for page header | `