This is what I like to see, however, I think that more can be done with the document structure.

I use a section element to enclose a heading with the paragraphs that immediately follow it, thereby scoping text to a heading.

The advantage to this approach is that you 'gain a class' (okay a section) that can be used for styling.

I am not keen on adding my own make-believe elements, however, I have found that, if you know your HTML elements, you can write surprisingly human readable HTML.

There is no need to be fundamentalist with going 'classless', classes are the way to go for situations such as when an element changes.

I also take heed of the HTML5 spec and the advice regarding the use of 'div'. There really is always a better element to use, and, with 'divs' removed, it is trivial to layout any content with CSS grid.

Scoped CSS is also a game changer, however, you have to pretend Firefox does not exist, which is fine by me for my hobby site. Scoped CSS means that you can keep the CSS simple without bizarre selectors that the next developer will not like.

It all depends on what you are trying to create. If you were to want to do your own version of Gmail then you are in a world of complexity. However, blogs, ecommerce and much else does not need to be a complex mess with a 10000 line 'add to' CSS burden.