[hn0]

There’s a problem with this approach, which I found out about the hard way.

Like you I thought I should keep my html “semantic”. The problem with this approach is that you end up tightly coupling the stylesheet and the html, because it requires you to recreate the html’s tag structure using contextual selectors.

Besides becoming very complex this means that every time you need to change the html you also need to change the css.

The other major downside is that all those mixins end up generating a ton of duplicate rules in the stylesheet.

Note that if you define everything using classes and then put those classes in the html you have none of these issues. The coupling is much more straightforward and the stylesheets can be much smaller. Besides that, contextual selectors are many times slower than a single classname.

The inline styles thing I can’t agree with, classes are much more DRY.

I found the methodologies outlined by Harry Roberts to change the ways I structure my css for the better. (www.csswizardry.com)