This is a great approach. Just to add to it, you can also use custom elements in lieu of classes, such as:

<my-product>...</my-product>

Any tag with a hyphen is considered a custom element, which is completely valid HTML -- even without defining the element in JS.

This gives you a more descriptive `div`, and then instead of classes like `product-primary`, you can use semantic attributes, like `<my-product primary size="large">`. In combination with CSS nesting, you can get some great looking HTML and CSS with minimal markup/visual noise and no build step.

Commercial work is different to pet projects, and, given that I have been told off for using <address> before now, I am wary of making up mu own elements.

I quite like styling the attributes, which gets me half-way to what you describe. In ecommerce we have all kinds of extra attributes for marking up products, although you can ditch that and just have a chunk of JSON+LD these days.

What happens is that I end up with great document structure and human readable/writable HTML and no CSS preprocessor things needed. However, sometimes I have things such as lots of sections containing lots of articles that contain lots of sections. I might take your tip to write '<top-category>' for those top-level sections.

When styling the elements, you tend to use the full range of elements, so a list could be a <dl>, <ol> or <ul> even if it eventually just gets styled as an <ul>. Really, semantics needs to come first, even if the presentation is just normal stuff.

I keep finding code examples where people are doing more than just using divs, which means that I am feeling more confident flexing the whole HTML element LEGO set.

you don't need a hyphen for a custom tag ; as far as i know the hyphen makes it an inline element while no hyphen makes it a block

You do need a hyphen for a custom-tag. The HTML specs have guaranteed never to create a tag with a hyphen, so it prevents collisions with any future tag additions.

> I do like to use the full HTML element set, and, with scoped CSS, to style the elements, rather than have loads of divs with loads of class attributes. It all looks so much neater, particularly if the unstyled CSS looks rather good.

From a discussion on HN a few days ago, I bookmarked this: https://github.com/dbohdan/classless-css

For the most common types of front-end work one needs to do, classless CSS is enough.

> The only use case I have for <div> is in a details/summary where there is no CSS to select the contents of a <details> element, excluding the <summary>.

div > *:not(summary)

This selects all the elements individually, so it behaves differently with attributes like margin or border.

I see. But then that wrapper is actually semantic and thus is eligible for the appropriate element.

do you have an example?

Not to hand, for sharing here, but just try it with something like your CV, in neat HTML. Set yourself some rules to not use classes (for the lols, not out of ideological hatred) or divs (there is always a better element).

If you can't do it, there is probably more work to do with your document structure. Also try and always have a h1-h6 heading in your articles, sections, asides and even navs, at the top. Headings should not be in a sea of paragraphs, they should be at the top of a content sectioning element, nowhere else.

Out of idle curiosity, which better element am I supposed to use when I'm using flex layout to space out elements on my page?

(e.g., a toolbar with with left- and right- justified elements, among which is an expanding searchbox).

HTML elements are used to describe their content and not have anything to do with layout. While they often have common properties, these can be changed using CSS.

So use the element that best describes its content.