こちらもOOCSSというCSS設計の基本思想である「コンテナー」と「コンテンツ」の分離も押さえておきましょう！

特定のコンテナーに依存しないようにCSSを書いてあげます。コンテナーとは親（もしくは祖先）要素と捉えてもらって大丈夫です。「依存しない」を言い換えると「使いまわし」できるパーツ（コンテンツ）を用意しておきましょう、ということになります。

特定の要素やクラスに依存していると、別の場所で使うことが難しくなります。ボックスクラス（.box）の中のタイトル（.title）だとしても、.box .title { /* hoge */ }という書き方ではなくて、.box{ /* hoge */ }、.title { /* hoge */ }といった形で分離してあげることで、使い回し可能な.titleというパーツを用意しておくことができるようになります。

「コンテナー」と「コンテンツ」が分離していない場合↓「コンテナー」と「コンテンツ」を分離している場合↓

この「使いまわしできる」という考え方もCSSでクラスを作る上では非常に重要になってきますので、キーワードとして押さえておきましょう！

Sassを覚えたばかりの人は要注意

Sassは入れ子にして書けることが特徴ですが、入れ子にしすぎると、コンテナーとコンテンツの分離の原則から外れてしまうことがあります。

例えば、先ほどの.boxの例をSassで書くと、以下のような入れ子の書き方で書いてしまいがちです。

.box {
  .title {
    /* ・・・ */
  }

  .list {
    /* ・・・ */
  }
}

これをコンパイルすると、以下のように親要素に依存する形になってしまいます。

.box .title {
  /* ・・・ */
}

.box .list {
  /* ・・・ */
}

Sassの入れ子を使う際は、コンテナー（親要素や祖先要素）に依存しすぎていないかを注意して使うようにしましょう！

BEMというCSS設計の命名規則を使うことで、クラス名から影響範囲が分かりやすくなります。命名規則というのは、「こういったルールでクラス名を付けましょう！」というクラス名を付ける際のルールになります。

BEMとは、Block、Element、Modifierの頭文字をとったCSS設計でおそらく一番有名なCSS設計です。Blockは「使いまわしできる」パーツにあたります。
（先ほどのOOCSSのコンテンツに近いですが、BEMの場合は子要素も合わせて1パーツと捉えることが基本です）

Blockで指定したクラスに対して、子孫要素をアンダーバー2つ（__）で繋いでクラス名を決めていきます。この子孫要素に指定したクラスがElementです。

.cardのBlockを作るとすると以下のような作り方になります。

<div class="card">
  <div class="card__title">タイトル</div>
  <div class="card__description">説明文が入ります。説明文が入ります。説明文が入ります。</div>
  <a href="" class="card__button card__button--primary">Primary</a>
  <a href="" class="card__button card__button--secondary">Secondary</a>
</div>

Blockを構成する要素としてElementがあり、BlockやElementの見栄えを拡張するクラスとしてModifierが存在します。

.card__buttonの見栄えを拡張するクラスとして、ハイフン2つで.card__button--primaryや.card__button--secondaryを加えることで見栄えの変更を実現できます。
※ 厳密にはMindBEMdingというBEM派生のクラス名の付け方ですが、こちらの方が目にする機会が多いのでハイフン2つの方で紹介しました。

これはOOCSSの構造と見栄えの関係に似ていて、.card__buttonで共通の見栄えを定義しておき、.card__button--primaryや.card__button--secondaryでCSSを追加するといった作り方になります。

クラス名を継ぎ足していくので、クラス名が長くなる傾向にあるのですが、このルールによって「影響範囲が予測しやすく」「使いまわししやすい」CSSにできるので、BEMのクラス名の考え方もぜひ覚えておいてください！
（アンダーバー2つで書かれていたら、BEMがベースになっているんだな、と捉えてください。）

※ ちなみにBEMにおけるハイフン（-）は単語の区切りを表します。
例）news-section__title → ニュースセクションのタイトル

Block起点に対する子クラスという命名が多い

BEMの命名規則とは違いますが、初級でも似たような考え方でクラス名が当てられている箇所があります。クラスの作り方のイメージとして、起点となる要素に対して子クラスを当てるという考え方が最初は迷いにくくコーディングできるコツになります。

初級のスイーツサイトの例だと、.header内の構成要素である.header-logo、.header内の構成要素である.header-navみたいな感覚ですね。
※実際はヘッダーの文字は白色ですが、見やすく黒色に加工しています。

最初のうちはCSS設計の正しさを考えすぎても大変だと思います。まずは、上記のような「〇〇の起点に対する子クラス」といったイメージでコーディングしてみてください！

ちなみにBEMの命名規則で表現すると、以下のような感じです。

SMACSSと呼ばれるCSS設計手法の中に「ステート」があります。これは状態を管理するためのクラスの付け方で、や「.is-active」といったクラス名を条件に応じて付与してあげることで要素の状態を管理することができるようになります。

JavaScriptやjQueryを使えば、「要素をクリックしたときに〇〇をする」といった処理ができるようになります。

例えば、ボタンをクリックしたら「.is-active」といったクラス名を付けることで、クリックされた時の見栄えを変えることが可能になります。

命名規則としては、「is-」を接頭辞として先頭につけて、後ろに状態を表す言葉を付けるような形です。

これは、構造と見た目の関係に少し似ていますが、基準となるクラスに対して状態によって見栄えを変えるという方法です！他にもクラスの付与ではないですが、:focusや:hoverといった「〇〇したら〇〇する」といった動きの指定になるので、似たようなイメージで捉えてください。

状態はSassの「&」で繋ぐことが多い

状態は要素に対する見栄えの変化なので、要素に紐づく形で指定することが多いです。Sassだと「&」をよく使います。状態での変化を表現したい時は以下のように書いてみてください！

.btn {
  &.is-active {
    /* .is-activeの状態の時の見栄え */
  }

  /* クラスと違いますが状態を表すもの */
  &:hover {
    /* マウスホバーした時の見栄え */
  }

  &:focus {
    /* 要素がフォーカスされた時の見栄え */
  }
}

他にもたくさんのCSS設計があります。ただし、基本的にはOOCSSとBEMを基本として作られていることが多いので、OOCSSとBEMの考え方を押さえることで、他のCSS設計も馴染みやすくなります。

考え方をまとめると以下のとおりです。

• 共通化できるクラスはまとめる
• 拡張クラスで別パターンの見栄えを追加
• パーツは使いまわしできるようにする
• クラス名から影響範囲が予測可能に
• 状態を管理する

今後コーディングする際はぜひ意識して取り入れていただくと、より効率的にコーディングできます！

CSS設計に興味をもって本格的に学びたい方は以下の書籍がおすすめですので、ぜひ手にとって見てください。