CSS設計を学びたい！
どうもエンジニアになって数ヶ月のひよっこすらなっていない卵エンジニアです！🐣
この記事を見ているのはmarginなどのプロパティやレスポンシブ、flexを学んだばかりという方が意外と悩みがちなクラス名をどうつけるかについて記事にしました！参考にしたのは『技術評論社 CSS設計完全ガイド 半田淳志 第5版』です。有名な本なだけあってわかりやすく、分厚い本でしたがスラスラ読めました。
まず、クラス名をつける前に、みなさんはWebサイトを制作するときにどんなことを意識していますか？クラス名をつける前に、制作するWebサイトをどれだけ細分化と抽象化して見ることが出来ているかが大切です。では細分化と抽象化とは何か？それはWebサイトを見たときに、ブロックやパーツごとに分けることを細分化、デザインが共通してるパーツやブロックを見つけることを抽象化と言います。
細分化
細分化をするメリットとして、共通するデザインのパーツやブロックを見つけやすくなったり、どこのクラスにpddingやmarginなどのプロパティを配置すればいいかも考え安くなリます。また、とりあえずプロパティを配置していくという初心者がやりがちなミスもなくせます！細分化するときに、まず初めに大きなブロックから順番に細かく分けていくようにしていきます。(親要素から小要素)
では御社の公式ホームページの一部を抜粋してを参考にやってみましょう！このサイトのheaderは画面上部に固定されているものですが、今回のメインはServiceと書かれているブロックを使うので、細かいことはあまり気にせずやります。
こちらをブロックごとに分けてみましょうか
こうなりました！赤い線＞オレンジ線＞水色＞ピンク＞青色の順番で小さくなっていくのがわかりますか？
- 赤い線 → まず大きくheaderとserviceのセクション（クラス名 section Service）に分ける
- オレンジ線→section serviceの中にセクションのタイトル(クラス名section-title)とその内容（クラス名content）に分ける
- 水色→ contetの中をそれぞれ三つの記事に分ける（三つともクラス名 service-article）
- ピンク→ articleの中が左右で文字列と画像に分かれている（クラス名 画像：aritcle__img, 文字列：article__texts）
- 青色→ article__textsをさらに分ける（クラス名 タイトル：article__title, テキスト：article__text, ボタン：article__btn）
このように大きなブロックからどんどん分解して細分化すると分けやすくなります。
抽象化
さて今度はデザインが共通しているパーツやブロックを見つけていきます。共通しているデザインはコードを使いまわしすことが出来ます（コンポーネント化）。これをするメリットは
- 書くコードを減らすことで時間短縮
- コードが減って、コードがみやすくなる
- 後に修正するとき、一度の修正で済む
などがあります。
上記のサイトを例に出すならば、クラス名articleの中身はどれも同じなのでコンポーネントできるでしょう。では、下の画像のボタンはどうでしょう？なんだか難しそうですね…ですが、ボタンの形やグラデーションになっているデザインなどは一緒なので一部はコンポーネント化できそうですね！異なる部分は別クラスを付与するなどして対応します。
例(class="article__btn abroad__btn")
だと、他の人が見たときにセクションなのか記事のタイトルなのかわからないですね。これはセクションのタイトルなので
class= "saection-title"
クラス名の付け方
やっと本題です。細分化と抽象化を意識した上でポイントを伝えていきます。
クラスの影響範囲を踏まえてつけよう
webサイトは大きくなればなるほどクラスも増えて行くので、「このクラスを編集すると、どの範囲に影響するのか」が、わかるようなクラス名が望ましいです。
例えばさっきのサイトを例に出すと真ん中の青枠のタイトルにクラスをつけるときに
class= "title"
とつけてしまうとセクションのタイトルのことをさしているのか、記事のタイトルをさしているのかがわかりません。
指したいのは記事のタイトルなので
class= "article-title"
とするといいですね。
クラスの役割を考えよう
クラス名というのは後から見たときに、どのようなブロックにまたはどんな機能を備えているかが一目見てわからないといけません。なので、そのクラスの役割に応じた名前をつける必要があります。
- そのブロックの内容を記載しているなら→ content
- 文字列のクラスなら→ text
などがあります。よく使われる名前を説明付きでわかりやすくまとめてくれている方の記事があったのでご紹介します。
-や_を使いこなそう
クラス名をつける際に、単語が二つ並ぶときは-か２つ目の単語の頭文字を大文字にする方法があります。また、itemやbtnなど単語の状態や見た目を表すものは__（アンダースコア２つ）で繋げるとより見やすくなります。