cssクラス名で迷わない命名規則[サンプルコードあり]

f:id:media-gatch:20181005165217j:plain

どうもー・ω・ガッチ(@MediaGatch)です。

WEB制作をしていてcssのクラス名で悩んだ経験ありませんか?

僕も昔はよく悩んでいました。

  • htmlタグにcssを当てようか?
  • id属性を使おうか?
  • クラスだと他のページとかぶるからどうしよう?

cssは簡単でシンプルにかけるので、最初はすぐに理解してかけるのですが、、、

サイトが大きくなってきたり、同じ表示を別のページで使いたい。などの要望が出てきたときに

cssの難しさに気づく人も多くないのではないでしょうか?

今回は、WEB制作8年の経験から得たノウハウをまとめました。

cssクラス名の決め方

以下の流れで決めていきます。

  • ページのどこで使用するのか?を考える
  • 使用する場所ごとにcssクラス名を決める
  • より細かく使用するhtmlを分ける
  • htmlのかたまりを一言で表現するクラス名を決める
  • htmlのかたまりの内部のクラスを決める
  • 色違いやちょっとした違いの場合

ページのどこで使用するのか?を考える

ますはhtmlだけで考えます。

サイトの上部に表示する部分であれば、ヘッダーですよね。

検索する入力欄はサイトの横に表示したいので、サイドバーですよね。

こんな風に、「どこで」使用するのか?を考えるとクラス名をつけるヒントが見つかります。

使用する場所ごとにcssクラス名を決める

htmlをどこでしようするのか?が定まってきたら

次は、クラス名を決めていきます。

使用する場所でのクラス名なので、どのサイトでも同じ名前を使いやすいかと思います。

僕がよく使用するクラス名をいかにまとめています。

表示場所 クラス名
サイト上部
ヘッダー
header
サイトのメインコンテンツ main
サイトの横
サイドメニュー
side
サイトの下部
フッター
footer
サイトの全体のサイズ
ラッパー
wrap

各htmlタグの中に、もう1つタグを作っておくと修正しやすかったり、

サイトの構成を統一できるのでおすすめです。

以下がサンプルのコードです。

<header class="header">
  <div class="wrap">
    <div class="header__inner">
    </div>
  </div>
</header>

<div class="main">
  <div class="wrap">
    <div class="main__inner">
      <div class="side">
        <div class="side__inner">
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="footer">
  <div class="wrap">
    <div class="footer__inner">
    </div>
  </div>
</footer>

より細かく使用するhtmlを分ける

上記でサイトのレイアウトがある程度できました。

次はその中に表示するhtmlを分けていきます。

分ける基準は、内容ごとになります。

内容というのは、「プロフィールを表示する部分」「1記事のまとまり」などがあるかと思います。

ページのどこで表示するのか?とは分け方が異なりますので、注意が必要です。

htmlのかたまりを一言で表現するクラス名を決める

細かく分けれたら、そのかたまりを一言であらわす名称を考えます。

プロフィールを表示する部分であれば、profile。

記事のまとめりであれば、article。

といった具合に決めていきます。

先ほど決めた表示する場所と内容のクラス名をセットにしてより具体的なクラス名へ変更していきます。

サイドバーに表示するプロフィールは、side__profile。

メインに表示する記事のかたまりは、main__article。

こんな感じでクラス名をくっつけて分かりやすくします。

クラス名をつないでいる"__"はBEMという命名規則の考え方から引用しています。

気になる方は、こちらも確認してください。

htmlのかたまりの内部のクラスを決める

どの場所に何を表示するのかが決まったら、あとは中身を埋めてあげれば完了です。

感のいい人は、すでにわかってるかもしれませんね。

さきほどの場所と内容のクラス名を合わせたときと同じ要領で、内部のクラス名も決めていきます。

今回は、「サイドバーに表示するプロフィール」について話します。

プロフィールに表示する内容は以下の4点としました。

  • サムネイル画像
  • 名前
  • 簡単な自己紹介
  • twitter等のSNSへのリンク

それそれに名前をつけるとすると、以下ですね。

  • サムネイル画像 > thumb
  • 名前 > name
  • 簡単な自己紹介 > desc
  • twitter等のSNSへのリンク > sns

場所と内容のクラスにくっつけることで、クラス名が完成します。

  • サムネイル画像 > sideprofilethumb
  • 名前 > sideprofilename
  • 簡単な自己紹介 > sideprofiledesc
  • twitter等のSNSへのリンク > sideprofilesns

サンプルはこちらです。

<div class="side__profile">
  <div class="side__profile__inner">
    <div class="side__profile__thumb">
      <img src="">
    </div>
    <div class="side__profile__name">
      名前
    </div>
    <div class="side__profile__desc">
      簡単な自己紹介
    </div>
    <div class="side__profile__sns">
      <a href="">SNSのリンク</a>
    </div>
  </div>
</div>
.side__profile{

}
.side__profile__inner{
  
}
.side__profile__thumb{
  text-align: center;  
}
.side__profile__name{
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.side__profile__desc{
  font-size: 1rem;
  line-height: 1.8;
}
.side__profile__sns{
  text-align: right;
}

色違いやちょっとした違いの場合

おまけに、同じような表示なんだけど、背景色だけ変更したい。など

こまかな違いが出てくることが多々あるかと思います。

そんなときは、クラス名で対応しましょう!

例えが、背景色を黒にして、文字を白にしたい。という要望があったとします。

そんなときは、htmlとcssを以下の方法で変更します。

  • 変更するhtmlタグにクラス名を追加する
  • 追加したクラス名に変更したいcssを記述する
<div class="side__profile side__profile--blak">
  <div class="side__profile__inner">
    <div class="side__profile__thumb">
      <img src="">
    </div>
    <div class="side__profile__name">
      名前
    </div>
    <div class="side__profile__desc">
      簡単な自己紹介
    </div>
    <div class="side__profile__sns">
      <a href="">SNSのリンク</a>
    </div>
  </div>
</div>
.side__profile{

}
.side__profile--black{
  color:#fff;
  background-color: #000;
}
.side__profile__inner{
  
}
.side__profile__thumb{
  text-align: center;  
}
.side__profile__name{
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.side__profile__desc{
  font-size: 1rem;
  line-height: 1.8;
}
.side__profile__sns{
  text-align: right;
}

どうでしょうか??

なんとなくつかめましたか??

わからない部分があったらぜひ、ガッチまで連絡下さい。

twitterはこちら → @MediaGatch