見出し画像

デイトラ Web制作コース 初級編 DAY25 HTML/CSSクラス名の付け方

MIO

ご覧いただき、ありがとうございます！

今回は「クラス名を何とするか」をCSS設計の基本概念からイメージするという回でした。


CSS設計の基本概念

HTMLでつけるクラス名が私の中では本当に難しくて、CSS実装の際に、クラスを足したり、変更したり…といったことが多くありました。

共通クラスもうまく使いこなせず、CSSのコードが無駄に長くなっていると感じたこともあります。

「CSS設計※の基本概念からイメージする」と教わりました。

CSS設計：
Webページやアプリケーションをデザインするときのやり方やルール

その観点から、クラス名をつける際の重要な考え方をご紹介します。

構造と見た目分離

その基本概念は「OOCSS」と呼ばれます。
OOCSSはCSSの「再利用性」や「保守性」を上げるための手法です。

その手法はいくつかあり、今回は三つご紹介したいと思います。

一つ目の重要な考え方の基本概念は「構造」と「見た目」の分離です。

/* 「構造」だけを書く */
.card {
  border: 1px solid #ddd;
  padding: 20px;
  margin: 10px;
}

/* 「見た目」を書く */
.card-primary {
  background-color: #f0f0f0;
  color: #333;
}

.card-secondary {
  background-color: #fff;
  color: #666;
}

例えば、色は違うけど同じ大きさのカードを何度も登場させたいとします。

cardクラスに大きさの部分だけ当てておけば、あとは見た目の部分だけを別のクラスで書けば、コードの重複がなくなります。

つまり、共通クラスにできるところは共通クラスとして作り、足りない部部のみを足していくという考え方です。

CSSコードがシンプルで管理しやすくなり、同じスタイルを使いまわせるので、コーディングスピードも上がりそうです。

コンテナーとコンテンツの分離

こちらもOOCSSのCSS基本設計の基本概念で、二つ目は、「コンテナー」と「コンテンツ」の分離です。

  • コンテナー：要素のレイアウトや配置に関するスタイルを担当
    　　　　　　＜例：margin / padding / flex-box など＞

  • コンテンツ：要素の見た目や内容に関するスタイルを担当
    　　　　　　＜例：font-size / color / background など＞

こちらも先ほどと考え方は同じです。

<!-- ↓ HTML -->

<div class="container card">
  <div class="contents">
    <h2>タイトル</h2>
    <p>コンテンツのテキスト</p>
  </div>
</div>

<div class="container card">
  <div class="contents">
    <h2>別のタイトル</h2>
    <p>別のコンテンツのテキスト</p>
  </div>
</div>
/* ↓ CSS */

/* コンテナーのスタイル */
.container {
  padding: 20px;
  margin: 10px;
  border: 1px solid #ddd;
}

/* カードのスタイル */
.card {
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* コンテンツのスタイル */
.contents h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.contents p {
  font-size: 1em;
  color: #333;
}

こちらもcontainerクラス（親）とcontentsクラス（子孫）で分けることで、親を次のセクションでも使い回すことできます。

「title」や「button」もできるところは共通化して使い分けることで、スタイルの再利用性や保守性を高められます。

命令規則

最後にBEMというCSS設計の「命令規則」を使いました。

これは「決まったルールでクラス名をつけようね」という考え方です。
書き方は簡単で、子孫要素のクラス名に「 __ 」（アンダーバーを二つ）つけます。

<section class = "menu">  <!-- 意味のあるクラス名をつける（親） -->
  <div class = "menu__inner">  <!-- アンダーバーを二つ使って、名前をつける（子） -->
    <ul class = "menu__list">
      <li class = "menu__item">
        <img class = "menu__item--img" src = "imgのURL" alt = "" />
      < /li>
    < /ul>
  < /div>
< /section

menu__item--imgをハイフン二つで書いていますが、ハイフンを一つにしてもOKです。

BEM（Block Element Modifier）

  • Block（ブロック）：独立したブロックを表す

  • Element（要素）　：ブロックの子要素・子孫要素を表す

  • Modifier（修飾子）：要素の外観やスタイルを表す

決まったルールに従って書くことで、可読性も上がり、同じブロックや要素を使い回すことで、冗長なコードも減らすことができます。
保守性も上がるので、このルールに習って書いておくと、後々楽になりそうです。

CSS設計について、詳しく解説してくださってる方がいたので、URLを貼っておきます。
詳しく知りたい方はぜひ読んでみてください。

感想

このセクションは、ずっと座学チックで正直なところしんどかった…笑

でもこのCSS設計の基本概念はとても重要で、覚えておくとクラスの命名時に悩むこともなくなり、時間も短縮できると思いました。

「もし自分が作ったWebサイトを数年後に誰かが編集するとしたら。」
「ルールに沿った書き方をせず、自由に書いていたら。」

誰も幸せにならなそうです。

デザイン通りに再現できるコーディング力が最重要だとデイトラでも言われていますが、こちらも意識しながら制作を進めていきます。

最後までお付き合いいただき、本当にありがとうございました🌸

Xで毎日デイトラの学習記録つけてます！
応援していただけると嬉しいです✨
X : https://twitter.com/totoro_mi8


この記事が気に入ったらサポートをしてみませんか？