I think the author failed to mention how this ties in with SASS/LESS mixins: instead of writing obtuse HTML: <div class="corner-box brand-color-bg pad-box

I think the author failed to mention how this ties in with SASS/LESS mixins: instead of writing obtuse HTML: <div class="corner-box brand-color-bg pad-box-mini shadow-box light-text-color content-box"></div> you could continue to write semantic HTML: <div class="sign-up-callout"></div> and then use mixins to separate the description of styling concepts and the implementation details: /*implementation details*/ .corner-box {...} .brand-color-bg {...} /*style descriptions*/ .sign-up-callout { .corner-box; .brand-color-bg; } I suppose the downside of the approach is that you need to carefully maintain a dictionary that isn't too tied to implementation, e.g. .red {color:red;} but also not too abstract, e.g. .box-callout {...} .box-call-to-action {...}