Just a couple notes to keep us on the same page:
- Follow BEM approach to class names (as much as is reasonable without creating extra work for nothing). The benefit of this is making sure that all components are as modular as possible. This means avoiding nested style declarations whenever possible. This doesn’t always make sense, so I’ll give examples of each.
Avoid nesting whenever a component could exist anywhere else on the page. Icons are a perfect example, but the general rule should be to lean away from nesting unless it's a completely self contained item with nothing that could be re-used elsewhere.
<div class="hub__navigation">
<ul>
<li class="hub__navigation—-item"><a href="#"><i class="hub__icon--home"></i> Home</a></li>