ネストされたコンポーネント (Nested Components)

.article-linkにネストされた.vote-boxコンポーネント

<div class='article-link'>
  <div class='vote-box'>
    ...
  </div>
  <h3 class='title'>...</h3>
  <p class='meta'>...</p>
</div>

このようにコンポーネントをネストする必要が出てくる場合があります. ここでいくつかの方法を紹介します.

バリアント (Variants)

コンポーネントは別のコンポーネントでネストされた時に特定の方法で表現する必要がある場合があります. ネストされたコンポーネントを修正しないようにするにはそれを含むコンポーネントからアクセスします.

.article-header {
  > .vote-box > .up { /* ✗ これは避ける */ }
}

代わりに, ネストされたコンポーネントにバリアントを加えてそれを含むコンポーネントから適用した方が良いです.

<div class='article-header'>
  <div class='vote-box -highlight'>
    ...
  </div>
  ...
</div>

.vote-box {
  &.-highlight > .up { /* ... */ }
}

ネストされたコンポーネントをシンプルにする

コンポーネントをネストしたとき、マークアップが美しくなくなる時があります.

<div class='search-form'>
  <input class='input' type='text'>
  <button class='search-button -red -large'></button>
</div>

こういった場合はCSSプリプロセッサの@extendを使ってシンプルにすることが出来ます.

<div class='search-form'>
  <input class='input' type='text'>
  <button class='submit'></button>
</div>

.search-form {
  > .submit {
    @extend .search-button;
    @extend .search-button.-red;
    @extend .search-button.-large;
  }
}

リストのようにエレメントを繰り返したい場合はどうしたらよいでしょう。次のレイアウトで見てみます Continue →