Pitfalls

嵌套组件冲突

要注意拥有相同元素的组件嵌套在一个容器里面的时候：

  1. <article class='article-link'>
  2.  <div class='vote-box'>
  3.     <button class='up'></button>
  4.     <button class='down'></button>
  5.     <span class='count'>4</span>
  6.   </div>
  8.   <h3 class='title'>Article title</h3>
  9.   <p class='count'>3 votes</p>
  10. </article>
  1. .article-link {
  2.   > .title { /* ... */ }
  3.   > .count { /* ... (!!!) */ }
  4. }
  6. .vote-box {
  7.   > .up { /* ... */ }
  8.   > .down { /* ... */ }
  9.   > .count { /* ... */ }
  10. }

这个例子中，如果 .article-link > .count 没有 > 子选择器，那么样式会自动地添加给 .vode-box .count 元素。 这也是推荐使用子选择器的原因。