Since large projects will inevitably have to rely on non-semantic HTML and class names anyway (e.g. to differentiate between sibling <p> tags), a simple rule of thumb would be to only use class names in selector construction. HTML elements can still be semantic for other purposes, but the CSS should not care about it.

The other half of the specificity problem is nesting. I advocate strongly against the descendant combinator ` ` in favor of the child combinator `>`. E.g. `.body > .content` is much more robust than `.body .content`. However, an alternate approach would be:

    <section class="body">
        <main class="body-content"></main>
        <aside class="body-sidebar"></aside>
    </section>

The top elements are one example. It makes no sense to include them inside any other element, and if that ever changes, all the styling will need to change anyway.