【CSS設計】合成コンポーネントを@extendで実装する

コンポーネントを作る際、別のコンポーネントをパーツとして使うことがあります。
例えば、以下のアンケートテーブルでは、「アンケート行」が１つのコンポーネントになっていて、その中で「ボタン」コンポーネントが使われています。

これを素直に実装すると、「アンケート行」と「ボタン」をそれぞれ独立したコンポーネントとして実装し、HTML 上で組み合わせる、という感じになるかと思います。

.action-btn {
  // ボタンのスタイル
}

.enquete {
  // アンケート行のスタイル
}

<table class="enquete-table">
  <tr><th>アンケート名</th><th>回答</th></tr>
  <tr class="enquete">
    <td class="enquete__title">アンケート１</td>
    <td class="enquete__action"><button class="action-btn">回答する</button></td>
  </tr>
  <tr class="enquete">
    <td class="enquete__title">アンケート２</td>
    <td class="enquete__action"><button class="action-btn">回答する</button></td>
  </tr>
  <tr class="enquete">
    <td class="enquete__title">アンケート３</td>
    <td class="enquete__action"><button class="action-btn">回答する</button></td>
  </tr>
</table>

これでも悪くはないのですが、.enquete と .action-btn の関係を Sass 上で表現できないため、「この２つを組み合わせて使う」というルールをどこかに定めておかなければなりません。

また、「回答済み」のスタイルをつくる際も、

.action-btn {
  // ボタンのスタイル

  &--disabled {
    // 利用できないボタンのスタイル
  }
}

.enquete {
  // アンケート行のスタイル

  &--done {
    // 回答済みのスタイル
  }
}

  <tr class="enquete enquete--done">
    <td class="enquete__title">アンケート３</td>
    <td class="enquete__action"><button class="action-btn action-btn--disabled">回答済み</button></td>
  </tr>

というように、それぞれの Modifier を用意して HTML 上で組み合わせなければならず、伝えなければならないルールが増えてしまいます。

コンポーネントの関係を Sass 上で表現する

.enquete の Element としてボタンクラスを用意し、@extend を使って .action-btn を適用します。

.enquete {
  // アンケート行のスタイル

  // 回答ボタン
  &__answer-btn {
    @extend .action-btn;
  }
}

  <tr class="enquete">
    <td class="enquete__title">アンケート１</td>
    <td class="enquete__action"><button class="enquete__answer-btn">回答する</button></td>
  </tr>

このようにすると、回答ボタンに .action-btn を使っていることが Sass を見ただけで分かるようになり、HTML を書く際に「組み合わせのルール」を参照する必要もなくなります。

また、使うボタンを .action-btn から .control-btn に変更することになった場合、元の実装だと HTML の該当箇所をすべて見つけ出して修正しなければならず、手間がかかる上に修正漏れが発生する可能性もありますが、この方法なら @extend するクラスを変更するだけで済みます。

回答済みボタンの Modifier も Sass 側で吸収する

.enquete--done の .enquete__answer-btn に、@extend を使って .action-btn--disabled を適用します。

.enquete {
  // アンケート行のスタイル

  &--done {
    // 回答済みのスタイル

    // 回答ボタン
    .enquete__answer-btn {
      @extend .action-btn--disabled;
    }
  }
}

  <tr class="enquete enquete--done">
    <td class="enquete__title">アンケート３</td>
    <td class="enquete__action"><button class="enquete__answer-btn">回答済み</button></td>
  </tr>

これで回答済みのボタンには .action-btn--disabled を使っていることが Sass を見ただけで分かるようになり、HTML 側も単に .enquete--done Modifier を使っているだけのように書くことができます。