デイトラweb制作中級編 DAY9

CSS設計とは

CSS設計 ・・・ 先人が体系化して共有している、効率的かつ管理しやすいCSSの形(様々な型がある)

Day9の目標

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

CSS設計の考え方

重要な考え方

① 共通化する部分は共通パーツとして定義(今回は省略)

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

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

④ 状態を管理する

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

今回は ↓ の3つ

OOCSS

BEM

SMACSS

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

② 「コンテナー」と「コンテンツ」の分離(OOCSS)

コンテナー ・・・ 親(祖先)要素

コンテンツ ・・・ 「使いまわし」できるパーツ

例 ↓

HTNL

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

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

</div>

この場合、

.box」は ⑴コンテナー

.title」は ⑵コンテンツ

CSS

コンテナーとコンテンツを分離(良い例)

.title {
    /* ・・・ */
}

コンテナーとコンテンツを結合(悪い例)

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

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

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

③ クラス名から影響範囲が分かる(BEM)

B ・・・ Block、「使いまわしできる」パーツ

E ・・・
Element、Bを構成する要素

M ・・・
Modifier、BとEの見栄えを拡張するクラス

※注意

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を見直したいと思います!

コメントを残す

メールアドレスが公開されることはありません。