Comment by uk_programmer

> In my experience trying to do semantic CSS just adds a lot of extra cognitive overhead.

Do people really struggle with this?

    <div class="hero">
        <h1 class="hero-title">Heading</h1>
        <p class="hero-tagline">Tagline</p>
    </div>

It far more straight forward just to call something what it is and you can actually read the CSS afterwards.