デイトラweb制作中級編　DAY9

CSS設計とは

Day9の目標

CSSの設計の基本からクラスの付け方をイメージできるようにする
_{（コーディング力優先、とりあえず考え方のみ）}

CSS設計の考え方

CSS設計には色んな型がある

今回は ↓ の3つ

・OOCSS

・BEM

・SMACSS

OOCSSとBEMを基本として作られていることが多い

② 「コンテナー」と「コンテンツ」の分離（OOCSS）

例　↓

HTNL

<!-- ⑴コンテナー -->
<div class="box">

    <!-- ⑵コンテンツ -->
    <div class="title">タイトル</div>

</div>

この場合、

「.box」は　⑴コンテナー

「.title」は　⑵コンテンツ

CSS

コンテナーとコンテンツを分離（良い例）

.title {
    /* ・・・ */
}

コンテナーとコンテンツを結合（悪い例）

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

悪い例の場合、「.title」をほかの場所で使いたくても

「.box」以外の場所では使うことができない

③ クラス名から影響範囲が分かる（BEM）

※注意

BEMのBlock　≠　OOCSSのコンテンツ


Block ・・・ 子要素も合わせて1パーツ

コンテンツ ・・・ 子要素は含めない

HTML

<!-- ⑴Block -->
<div class=”card”>
    <!-- ⑵Element -->
    <div class=”card__title”>タイトル</div>
    <div class=”card__description”>説明文が入ります。</div>
    <!-- ⑶Modifier -->
    <a href=”” class=”card__button card__button--primary”>Primary</a>
    <a href=”” class=”card__button card__button--secondary”>Secondary</a>
</div>

この場合、

⑴Block　
_{→　「.card」}

⑵Element「親要素__子孫要素」
_{→　「card__title」「card__description」「card__button」}

⑶Modifier「親要素__子孫要素--自由名」
_{→　「card__button--primary」「card__button--secondary」}


クラス名が長くなる傾向にあるが、

「影響範囲が予測しやすく」「使いまわししやすい」CSSにできる

④ 状態を管理する（SMACSS）

「.is-active」のように

「is-」を接頭辞として先頭につけて、後ろに状態を表す言葉を付ける

Sassでは「&:hover」のように「&.is-active」と表現する ↓

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

まとめ

今回はCSS設計からクラスの付け方を学習しました。

CSSの作成は、OOCSSとBEMを基本として作られていることが多いみたいですが

個人的にはOOCSSの方がいいなあと思いました。

時間があれば、学んだことを意識してデイトラ簡易サイトのSassを見直したいと思います！