I always read articles that suggest to not use presentational CSS class names. Currently I'm working on a small website project. The footer on this website looks like this:
Although it's pretty simple, I'm not exactly sure how to name the class names. At the moment, I'm using this grid system, which uses class names like "one-quarter", "one-half" and so on. Easiest way would then probably be to use a HTML structure like this:
<footer class="footer">
<div class="grid">
<div class="grid__item one-quarter">
<h5>Adress</h5>
Lorem Ipsum<br>
Lorem Ipsum
</div><!--
--><div class="grid__item one-quarter">
<h5>Adress</h5>
Lorem Ipsum<br>
Lorem Ipsum
</div><!--
--><div class="grid__item two-quarters">
<nav class="nav--meta">
<!-- UL / LI for the navigation -->
</nav>
</div>
</div>
</footer>
But for several reasons I'll have to use SASS silent classes instead of using those classes like "one-quarter" directly in my HTML structure:
.classname {
@extend %grid__item;
@extend %one-quarter;
// ...
}
So I'm not sure how to name my different columns inside my footer. "footer_left" / "footer_right" are very presentational, so is "footer_adress" (content might change in future) / "footer_nav". Are there any best practices around or an article about CSS class naming in general?
And I'm aware that this is mostly personal opinion, but I would still like to hear from others how they deal with it.