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>