clean-dom

Clean DOM & Styling

Semantic HTML

// ✅ Good - Semantic structure
<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Article Title</h1>
    <section>
      <h2>Section Title</h2>
      <p>Content</p>
    </section>
  </article>
</main>

<aside>
  <h2>Related</h2>
</aside>

<footer>
  <p>&copy; 2024</p>
</footer>

// ❌ Bad - Non-semantic nesting
<div className="header">
  <div className="nav">
    <div className="nav-item">Home</div>
  </div>
</div>

Use semantic elements: header, nav, main, article, section, aside, footer, figure, figcaption, time, mark, address

Avoid unnecessary div/span: Only when no semantic element fits

DOM Structure - Anti-Nesting

// ✅ Good - Flat, semantic structure
<article>
  <header>
    <h1>Title</h1>
    <time dateTime="2024-01-01">Jan 1, 2024</time>
  </header>
  <p>Content</p>
</article>

// ❌ Bad - Unnecessary nesting
<article>
  <div className="article-header">
    <div className="header-content">
      <div className="title-wrapper">
        <h1>Title</h1>
      </div>
    </div>
  </div>
</article>

Principles: Prefer semantic elements over wrapper divs, flatten structure, use CSS Grid/Flexbox for layout, group related content with semantic containers

Responsive Images

// ✅ Good - Responsive with srcset
<img
  src="/image.jpg"
  srcSet="/image-320w.jpg 320w, /image-640w.jpg 640w, /image-1280w.jpg 1280w"
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
  alt="Descriptive alt text"
  loading="lazy"
  width={1280}
  height={720}
/>

// ✅ Good - Picture element for art direction
<picture>
  <source media="(max-width: 640px)" srcSet="/mobile.webp" type="image/webp" />
  <source media="(min-width: 641px)" srcSet="/desktop.webp" type="image/webp" />
  <img src="/fallback.jpg" alt="Descriptive alt text" loading="lazy" width={1280} height={720} />
</picture>