↗ Elise Hein: 'Fighting inter-component HTML bloat'

As I'm refactoring an existing design system, this article by Elise Hein came quit timely.

We consider HTML to be cheap, but wrapping divs in divs in divs comes with a cost that slowly creeps up.

Why avoid extra wrapper elements?

  1. Bloated html hurts performance
  2. Redundant elements can create problems with accessibility
  3. Redundant elements can break styling
  4. Deeply nested dom trees are annoying to work with