Skip to content

Styles bleed through #78

Open
Open
@simplesmiler

Description

@simplesmiler

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]).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions