HTML Best Practices: Avoid Unnecessary Presentational Markup

Write clean, semantic markup, avoid writing unnecessary presentational markup. Markup should always dictate what the content is, and CSS should dictate how the content looks. Mixing these two concerns makes maintaining code more difficult.

By using Sass, we’re able to better extend our classes within our CSS, allowing us to easily separate concerns between markup and styling. For example, we can @extend or @include our grid column sizes as well as media queries to modify the behavior at different sizes so that styles live separately from markup.

This is not to say that multiple classes on an element are unacceptable. Contextual modifier classes are certainly acceptable and encouraged.

Examples

Bad:

<div class="col-lg-6 col-md-6 col-sm-9 col-xs-12 featured-image"></div>

Good:

<nav class="primary-nav"></nav>
<nav class="primary-nav open"></nav>