<div class="header colors-skin"> ... </div>
<div class="colors-skin"> ... </div>
<div class="footer colors-skin"> ... </div>
.colors-skin {
background: #BADA55; color: #000;
}
.header {
width: 960px; margin: 0 auto;
}
.footer {
text-align: center; padding-top: 20px;
}
<header class="site-header">
<div class="logo"></div>
<div class="navigation"></div>
</header>
.site-header { ... } /* block */
.site-header__logo { ... } /* element */
.site-header__logo--xmas { ... } /* modifier */
.site-header__navigation { ... } /* element */