陷阱 (Pitfalls)

巢狀元件的 Bleeding

請謹慎使用巢狀元件，因為其中可能會出現擁有相同類別名稱的元件。

<article class='article-link'>
    <div class='vote-box'>
        <button class='up'></button>
        <button class='down'></button>
        <span class='count'>4</span>
    </div>

    <h3 class='title'>Article title</h3>
    <p class='count'>3 votes</p>
</article>

.article-link {
    > .title { /* ... */ }
    > .count { /* ... (!!!) */ }
}

.vote-box {
    > .up { /* ... */ }
    > .down { /* ... */ }
    > .count { /* ... */ }
}

上面的例子中，若是 .article-link > .count 並不是使用 > 子元素選擇器(而是用後代選擇器)，那此類別的屬性也會寫入 .vote-box .count 元素中。也因此作者較推薦使用子元素選擇器。