# Minimize DOM Elements

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

## Merge Redundant Wrappers

```liquid
{% comment %} BAD: wrapper div adds nothing {% endcomment %}
<div class="flex gap-24">
  <div>
    <h2>{{ section.settings.title }}</h2>
  </div>
</div>

{% comment %} GOOD: h2 can live directly in flex container {% endcomment %}
<div class="flex gap-24">
  <h2>{{ section.settings.title }}</h2>
</div>
```

## Flatten Nested Containers

```liquid
{% comment %} BAD: unnecessary nesting {% endcomment %}
<div>
  <div class="py-48">
    <div class="grid grid-cols-2">
      <div class="flex flex-col">
        <div>
          <p>{{ block.settings.text }}</p>
        </div>
      </div>
    </div>
  </div>
</div>

{% comment %} GOOD: root takes padding, grid is direct child {% endcomment %}
<div class="py-48">
  <div class="grid grid-cols-2">
    <p>{{ block.settings.text }}</p>
  </div>
</div>
```

## Use Semantic Elements Instead of Divs

```liquid
{% comment %} BAD: div soup {% endcomment %}
<div class="flex flex-col gap-16">
  <div class="text-24 font-bold">{{ block.settings.title }}</div>
  <div>{{ block.settings.description }}</div>
</div>

{% comment %} GOOD: semantic HTML {% endcomment %}
<article class="flex flex-col gap-16">
  <h3>{{ block.settings.title }}</h3>
  <p>{{ block.settings.description }}</p>
</article>
```

## Snippets Already Handle Structure

Don't wrap snippets in extra divs — they output their own root element:

```liquid
{% comment %} BAD: wrapping snippet in div {% endcomment %}
<div class="image-wrapper">
  {%- render 'picture', image: section.settings.image, mobile_width: 768, desktop_width: 1440 -%}
</div>

{% comment %} GOOD: snippet outputs its own <picture> element {% endcomment %}
{%- render 'picture', image: section.settings.image, mobile_width: 768, desktop_width: 1440 -%}
```

## Common Overnesting Patterns to Avoid

| Pattern                                                    | Fix                           |
| ---------------------------------------------------------- | ----------------------------- |
| `<div><img></div>` where div has no styles                 | Remove the div                |
| `<div class="flex"><div class="flex-1">` with single child | Remove outer flex             |
| `<div><ul><li>...</li></ul></div>`                         | The `<ul>` is enough          |
| Wrapper div just for `class`                               | Move class to parent or child |
| `<div>{% render 'snippet' %}</div>`                        | Snippet has its own root      |