Over-qualifying selectors

by Marius Craciunoiu

HTML

<article class="article">
    <header>
        <h1 class="title-bad">.article h1.title-bad {}</h1>
        <h1 class="title-good">.article .title-good {}</h1>
    </header>
</article>

<article class="article article--orange"> 
    <header>
        <h1 class="title-bad">.article--orange h1.title-bad {}</h1>
        <h1 class="title-good">.article--orange h1.title-good {} // qualifying selector to increase specificity</h1>
    </header>
</article>

CSS

.article--orange h1.title-bad,
.article--orange h1.title-good {
    color: orange;
}

.article h1.title-bad,
.article .title-good {
    color: grey;
}

article {
    font-family: monospace;
    padding: 10px 20px;
}