[davidwoof1]

Some of this sounds like it really complicates the layout code, but I'm not sure I'm reading it right. Take, for example, a standard dialog template. If I have a large number of dialogs for editing user/products/whatever, all with the same basic `<div><label><span><input>` layout, it sounds like he's saying that I can't rely on the dialog template to format my labels, I have to apply the `dialog-label` class to every label in every dialog. Almost every tag in my doc will have a class attribute, since I can never rely on selectors to apply the right styling. In general, selectors are almost never used and classes do all the work.

Am I reading this right? Or are templates an exception? I need to re-read the template/component thing a few times to figure out exactly what nomenclature he's using here. But in general, I'm not sure I see the advantage of `.modal__form__item` vs. `.modal .form .item` except that the first is exponentially more verbose in the html.

[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...