---
title: Minimize DOM Elements
impact: HIGH
impactDescription: reduces DOM size and improves rendering performance
tags: rendering, dom, semantic, optimization, custom
---

# Minimize DOM Elements

Every element must serve a purpose — layout, semantics, or interactivity. Remove wrappers that add nothing.

## Merge Redundant Wrappers

```tsx
// BAD: wrapper div adds nothing
<div className="flex gap-24">
  <div>
    <h2>{title}</h2>
  </div>
</div>

// GOOD: h2 can live directly in flex container
<div className="flex gap-24">
  <h2>{title}</h2>
</div>
```

## Flatten Nested Containers

```tsx
// BAD: unnecessary nesting
<section>
  <div className="py-48">
    <div className="grid grid-cols-2">
      <div className="flex flex-col">
        <div>
          <p>{text}</p>
        </div>
      </div>
    </div>
  </div>
</section>

// GOOD: section takes padding, grid is direct child
<section className="py-48">
  <div className="grid grid-cols-2">
    <p>{text}</p>
  </div>
</section>
```

## Use Semantic Elements Instead of Divs

```tsx
// BAD: div soup
<div className="flex flex-col gap-16">
  <div className="text-24 font-bold">{title}</div>
  <div>{description}</div>
  <div onClick={handleClick}>Learn more</div>
</div>

// GOOD: semantic HTML eliminates need for extra wrappers
<article className="flex flex-col gap-16">
  <h3>{title}</h3>
  <p>{description}</p>
  <button onClick={handleClick}>Learn more</button>
</article>
```

## Common Overnesting Patterns to Avoid

| Pattern                                                            | Fix                           |
| ------------------------------------------------------------------ | ----------------------------- |
| `<div><img /></div>` where div has no styles                       | Remove the div                |
| `<div className="flex"><div className="flex-1">` with single child | Remove outer flex             |
| `<div><ul><li>...</li></ul></div>`                                 | The `<ul>` is enough          |
| Wrapper div just for `className`                                   | Move class to parent or child |