Avoid wrapper elements that only hold a class

How to do it

Each extra wrapper deepens the tree, makes selectors longer and hides structure from assistive technology. Style the parent, the child or the list item directly. Use an attribute such as data-size on the existing element for a variant. When a wrapper is needed for a container query, it carries the module class and earns its place. The selector depth limit is in Never style by position or deep nesting.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

HTML example

<!-- Avoid -->
<div><div><ul class="menu-list"><li>Rye loaf</li></ul></div></div>

<!-- Do -->
<ul class="menu-list"><li>Rye loaf</li></ul>

JavaScript example

const emptyWrappers = html.match(/<div>\s*<div[\s>]/g) || [];
if (emptyWrappers.length) throw new Error(`${path}: ${emptyWrappers.length} bare div wrappers`);

Python example

import re
empty_wrappers = re.findall(r"<div>\s*<div[\s>]", html)
if empty_wrappers:
    raise SystemExit(f"{path}: {len(empty_wrappers)} bare div wrappers")

How to check

A build check over every page finds 0 div elements without attributes whose first child is a div.

Sources

• HTML Standard on the div element

Related rules

• Never style by position or deep nesting in HTML and CSS