Open
Description
Example:
/* comment.css */
:host .header {
color: blue;
}
/* article.css */
:host .header {
color: red;
}
<article class="_article-hash">
<h1 class="header">Article title</h1>
<section class="comments">
<article class="_comment-hash">
<h2 class="header">Comment title</h2>
</article>
<section>
</article>
Comment header will be either red or blue, depending on the order of file inclusion. You can guard with >
selectors, but this makes your CSS dependent on the exact DOM structure.
Shadow DOM naturally does not suffer from this.
BEM does not suffer from this, due to using unique names.
CSS Modules does not suffer from this, due to rewriting all class names.
Vue implementation of scoped styles does not suffer from this, due to rewriting HTML too and using different prefixing technique (<div class="header" _article-hash>
and .header[_article-hash]
).