BEM - markhowellsmead/helpers GitHub Wiki
<section class="c-app c-app--front">
<header class="c-header c-app__header">
<h1 class="c-title c-app__title"><a class="c-app__link">The title</a></h1>
</header>
<figure class="c-media c-app__media">
<img class="c-app__image c-app__image--jpg">
</figure>
<div class="c-content c-app__content">
<h2 class="c-subtitle c-app__subtitle"><a class="c-app__link">Subtitle 2</a></h2>
…
…
<h2 class="c-subtitle c-app__subtitle"><a class="c-app__link">Subtitle 2</a></h2>
…
…
<h2 class="c-subtitle c-app__subtitle"><a class="c-app__link">Subtitle 3</a></h2>
</div>
</section>The goal is to avoid nesting to more than three levels - for the sake of legibility and in order to avoid specificity problems.
// All App components
.c-app {
.c-app__link {
}
.c-app__subtitle {
}
}
// The app component specifically for the start page
// This has no dependency on a page template class name
.c-app--front {
.c-app__link {
}
.c-app__subtitle {
.c-app__link {
}
}
}
.c-app__subtitle {
.c-app__link {
}
}
// All title components over the whole website
.c-title {
}