2024.08.13 2024.08.14

[Web制作日記#20]CSS設計を解説してみる。

ベアさん

記事内に商品プロモーションを含む場合があります

お盆休みで仕事が暇なので、このうちにWeb制作をゴリゴリ進めるベアさんです。

そんな今日はCSS設計を忘れないうちにアウトプットしてみます。

ベアさん

記念すべき、アウトプットシリーズの第５弾だよ！

過去作はこちら（最初の時よりも増えてる笑）↓

アウトプットシリーズ(全7回)

HTML&CSS
JavaScript
PHP
WordPress
CSS設計→今日はこれ
Sass
jQuery

ちなみに、次とその次の日記ではSassやjQueryのアウトプットもしますね。

興味のある方、ぜひ最後まで読んでいただけますと嬉しいです。

Contents

CSS設計を解説してみる
- 頭の中にあること
- 調べてなるほど！って思ったこと
小さい頃よく行った、イトーヨーカドーに行ってきた話
次回：Sassを解説してみる。

CSS設計を解説してみる

CSS設計は本を2冊読んだけですが、果たしてアウトプットできるのか不安でしかないです笑

いつも通り

頭の中にあること
調べてなるほど！って思ったこと

の２つの構成で解説します。

頭の中にあることはまじ何もみないで書いてるので、嘘書くかもっす笑(その時はちゃんと後から修正入れるよ！)

それでは、みていきましょう↓

頭の中にあること

前提知識

前提として、CSS設計とは「修正に強いCSSを書く手法」のことです。(拡張性がある・堅牢とかもいいます)

よくある誤解として

よくある誤解

❌ 壊れないCSSを書く方法

って思ってる人もいますが、それは不可能です。

壊れた時に、勇気を持って修正できる。そんなCSSをかけるように僕らはCSS設計を学習します。

また、CSS設計の種類は色々あって

OOCSS
SMACSS
BEM(僕がメインで使うのはこれ)
オリジナル

などがあります。

僕がメインで使いたいって思う手法はBEM(ベム)というCSS設計の方法で、CSS設計の中でも破壊力抜群の手法らしいです笑

以下ではBEMをメインに解説します↓

具体的な手法

そもそも、BEMって３つの英単語の頭文字で

B→Block
E→Element
M→Modifier(モディファイア)

略さないと、こんな感じになります(Mの英単語あってるかわからん笑)

●Block

Blockとは、独立したモジュールのことです。つまり、「他でも使いまわせるか？」って視点で判断できます。

上記はBlockの例ですが、他の箇所でも使おうと思ったら使えそうですよね。

また、こういった大きい単位でもBlockになるので、WebページはBlockによって構成されてるわけですね。

●Element

Blockの中に存在してて、それ単体では使用できないものをElementと言います。

ベアさん

ElementをBlock外と使うのを例えるなら「殻のないヤドカリ」状態だよ！

色々言いましたが笑、ElementはBlockを構成する要素と覚えてくださいね。

●Modifier(モディファイア)

ModifierはBlock(またはElement)の状態を表します↓

うーん。正直、Modifierのことは結構抜けてますね。

なんか、２種類あった気が…

これ、後から書いてます

真偽値
キーと値のペア

ってのがあって、真偽値とは「is_active(アクティブか？)」みたいなので赤色にするみたいな感じ。

キーと値のペアは「サイズ(size)が大きい(large)」みたいな感じです。

いや〜ごっそり抜けてました笑ここってミソの部分なのでしっかり覚えておきます。

最終的なコードはこんな感じです↓

<div class="block-name">
  <div class="block-name__element-name">
    <p>ベアさんの日記</p>
    <span class="block-name__element-name_modifier-name">読んでくれてありがとう</span>
  </div>

  <div class="block-name__element-name">
    ...
  </div>
</div>

ベアさん

Blockの中にElementがあって….Modifireで調整してるね！

Mix

BEMにはもう一つ押さえておきたいMix(ミックス)って技術があります。

BEMだけだったら、

レイアウトが整えられない！

って問題が起こります。

例えば、paddingなどの余白を入れたい時…Mixって設計手法を使います。

コードはこんな感じです(P.S コードの書き方間違ってたので修正しました)↓

<div class="header">
  <div class="logo header__logo">

  </div>

  <div class="title header__title">

  </div>

  <div class="search header__search">

  </div>

  <div class="nav header__nav">

  </div>
</div>

<style>
.header__logo{
  padding: 9px;
}
</style>

BEMだけだったら、logoだけで良かったもののheader__logoクラスを作成してそのクラスにレイアウトを設定してますね。

そんな感じです！

命名規則

BEMにはクラス名の命名規則があります。(コードを見れば、なんとなくわかるかもですが。)

BEMの命名規則

block-name__element-name_modifier-name

押さえておきたいのは

BlockとElementの間はアンスコ(_)２つ
ElementとModifierの間はアンスコ(_)１つ
ハイフンは区切りに使う

って感じです。

また、他の命名手法もあって、ElementとModifierの間にハイフン２つ…などもあるようです。

個人的には、そっち使おうかなって思ってます。

頭の中にあるシリーズは一旦おしまいです。長いですが、読んでくださりありがとうございます！

調べてなるほど！って思ったこと

CSS設計うろ覚えのところが多くて、結構調べました。

Elementの理解が浅かった

まずこれです。

Elementって何やったけ〜って普通になりましたもん。(最終的には、大きく違ってなかった。)

調べてあっと思ったのは

Elementがネストされる命名は避ける
Blockに昇華も考えれる

ぐらいです。

Modifierの単語について

Modifierの単語の綴りが間違ってないか心配でした。

ただ、調べてみると…

ベアさん

Modifier

あってる！良かったぁ

ギリセーフです。

Modifierが２種類ある件について

Modifierって２種類あるのはわかってたのですが、記憶から抹消されてました。

結果的には

真偽値
キーと値のペア

の２種類と調べたら出てきて、アッとなりました。

特にキーと値のペアですね。サイズが大きい。色が赤いなどなど。(ん？色が赤いってそのままだから省略しても良い？)

まぁ、今回はそんな感じでOKとしましょう！

Mixについてもコード間違ってた

Mixのコードの書き方が間違ってました。

最初以下のように書いてたんですよ↓

<div class="header">
  <div class="header__logo">

  </div>

  <div class="header__title">

  </div>

  <div class="header__search">

  </div>

  <div class="header__nav">

  </div>
</div>

ただ、Blockの名前ははっきりさせるのが重要みたいです。(logoとかは先に書くこと)

なので、下記のように修正しました

<div class="header">
  <div class="logo header__logo">

  </div>

  <div class="title header__title">

  </div>

  <div class="search header__search">

  </div>

  <div class="nav header__nav">

  </div>
</div>

<style>
.header__logo{
  padding: 9px;
}
</style>

そんな感じです！