When I first learned about CSS I was pretty intrigued by the
W3C Core Styles [1]. They were a pretty good illustration of the separation of presentation from the underlying markup.
It uses these 12 IDs:
css-zen-garden, design-archives, design-selection, zen-benefits, zen-explanation, zen-intro, zen-participation, zen-preamble, zen-requirements, zen-resources, zen-summary, zen-supporting
And these 39 classes:
archives, benefits, css-resources, design-archives, design-name, design-selection, designer-name, explanation, extra1, extra2, extra3, extra4, extra5, extra6, indicator, intro, main, next, page-wrapper, participation, preamble, requirements, resources, select, sidebar, summary, supporting, view-css, viewall, wrapper, zen-accessibility, zen-faq, zen-github, zen-license, zen-resources, zen-submit, zen-translations, zen-validate-css, zen-validate-html
If you've ever wondered how some websites end up with a meg of CSS, that's exactly how that happens. Each view/page starts with some markup, then you sprinkle some one-off CSS hooks over it, and then you write some overly specific CSS rules which are impossible to reuse. Rinse and repeat.
It's more efficient to create a library of reusable building blocks and then build your views/pages out of these. All of the more organized approaches (BEM, SUIT, etc) work this way. You always use what's already there and you only extend a component or create a new one if it's absolutely necessary.
But I always feel bad with all the CSS classes in my markup.
Back in the days I often had only <10 CSS classes and created my styles relative to that. I had the hope that those 10 classes would vanish with HTML5 and its special div-tags.
But now I'm running around throwing bootstrap classes around like there is no tomorrow.
We used to spend hours applying those 8 stylesheets to our pages and deciding which one we preferred... Really edgy types used two, or perhaps even three, different styles on their handwoven Web Pages.