[ahallock]

I think you've read it right. Your HTML is more verbose, but you get used to it. I have elements like <h1 class="product__head"></h1> and it seems ugly and redundant (the h1 already indicates that the element is a heading!), but the advantage is that your CSS rules have a narrow scope (fewer collisions) and are easier to maintain. Further, your CSS is no longer coupled with your HTML. I would use .product__head in my stylesheet instead of .product h1 or h1.product__head. Then, if someone changes the h1 to h2, the stylesheet doesn't have to change.

Essentially, you just have to treat your HTML class names as hooks into your CSS; that's their function. Your CSS rules should not be concerned with your HTML structure.

I hope that helps.

EDIT: This article, mentioned elsewhere in this thread, does a fine job explaining these concepts: http://nicolasgallagher.com/about-html-semantics-front-end-a...