こんにちは、あまさすです。
この記事では、次のような疑問にお答えします。
クラス名はどうやって付ければいいんだろう？
Webサイトを制作する際に、HTMLに出てくるクラス名について、どうやってクラス名を付ければいいのか悩んでいる方向けに記事を書いています。
記事の内容- いいクラス名とは
- クラス名のルール
- よく使う単語一覧
- BEMについて
いいクラス名とは
いいクラス名 ＝ 分かりやすい
ずばりコレです。
クラス名をつける際のルール（次の章で解説しています）は多少ありますが、基本的にこのクラス名にしないとダメというルールはありません。
なのでパッと見たときに、このクラス名はここの記述だとすぐに分かるクラス名にするのがベストです。
関係のない名前にすると
あとで修正するときに、どこの部分かを探すのに時間がかかってしまいます。
クラス名のルール
命名するにも一定のルールがあります。
①半角英数字以外は使用しない
ひらがな、カタカナ、漢字、全角英数字は使用できません。
②スペースは使用しない
半角スペースを入れると、その前後で別のクラス名と認識されてしまいます。
③記号は「-（ハイフン）」、「_（アンダースコア）」以外は使用しない
エラーや認識されないこともあるので、記号はハイフン、アンダースコアのみ使用しましょう。
④アルファベット以外から開始しない
数字や記号から開始しているクラス名は認識されないので、必ずアルファベットから始まるように設定しましょう。
よく使う単語一覧
クラス名でよく使う単語をまとめてみました。
ぜひ参考にしてみてください。
| 単語 | 意味 |
| global | 全体的な |
| main | メイン、主要な |
| section | セクション、分割された部分 |
| container | コンテナー、容器 |
| about | 〜について、企業情報など |
| works | 仕事、実績 |
| product | 製品 |
| service | サービス |
| archive | アーカイブ、保管所 |
| news | ニュース、新着情報 |
| blog | ブログ |
| contact | お問い合わせ |
| access | アクセス |
| section | 区分 |
| content | 文章の内容 |
| article | 記事 |
| top | トップ、上部 |
| toc | 目次（table of contentsの略） |
| area | エリア、特定の範囲 |
| box | ボックス、箱 |
| title | タイトル、表題 |
| subtitle | サブタイトル、副題 |
| description | 概要 |
| intro | 前書き |
| detail | 詳細 |
| wrap | 包装（Wrapperの略） ※対象を包み込んで覆い隠すという意味がある |
| inner | 内側 |
| text | 文章 |
| thumb | サムネイル画像（thumbnailの略） |
| img | イメージ画像（imageの略） |
| date | 日付 |
| time | 時間 |
| logo | ロゴ |
| hero | キービジュアル画像のこと |
| nav | ナビゲーション（navigationの略） |
| card | カード ※カード型レイアウトの際に使うことがある |
| btn | ボタン（buttonの略） |
BEMについて
ここまで、ある程度クラスの記述について学んできました。
CSSにはいくつかの記述方法があるのですが、ここではBEMについて少しだけご紹介します。
BEMとは、Block（かたまり）、Element（要素）、Modifier（装飾）の略語です。
この３つを用いた厳格なクラス名の命名ルールが特徴的なCSS設計方法の一つです。
CSS基準でクラス名のルールを決めておけばCSSが分かりやすくなります。
そしてそのルールをHTMLにも反映させればいいので記述がすっきりします。
- メンテナンス性が高い
- スタイルが予測しやすい
- 開発スピードが上がる
<div class=”Block__Element–Modifier”></div>
- BlockとElementの区切りは、_（アンダースコア）を2つ
- ElementとModifierの区切りは、–（ハイフン）を2つ
Blockとは
Webページは、ヘッダー、フッター、ナビゲーション、サイドバーなどのパーツで構成されています。
このパーツに当たる部分が、Blockです。
<div class="search">
<input class="search__input" type="text">
<input class="search__button" type="submit">
</div>ここでは、クラス名の「search」がBlockとなっています
Elementとは
Blockを構成する要素です。
Elementには、必ずBlock名を含めます。
<div class="search">
<input class="search__input" type="text">
<input class="search__button" type="submit">
</div>Elementは、クラス名searchの後ろの「input」と「button」となっています
Block名まで入れるとクラス名は長くなりますが、
「search」Blockの中の「button」なんだなとすぐに理解できます。
Modifierとは
既存のBlockやElementに対して、見た目を変えたい場合に使用します。
<div class="search">
<input class="search__input--red" type="text">
<input class="search__button--small" type="submit">
</div>Modifierは、「red」と「small」です
CSSの記述方法
BEMを用いたCSS記述をみてみたいと思います。
SCSS（cssの記述方式のひとつです）と組み合わせて使用する例が多いです。
.search {
&__input {
〇〇: 〇〇;
}
&__button {
〇〇: 〇〇;
}
}ネスト（入れ子）にすることができるので、記述が見やすくなります
まとめ
BEMは細かいルールがありますので、詳しく知りたいと言う方は公式サイト（英語）を見てみるのもいいかもしれません。
私は自分が使いやすいようにアレンジして使っているので、多少ルールを無視して使用しています。
チーム内や自分が使いやすいのが一番だと思いますが、ある程度ルールがあるとスムーズに進められるので参考にしてみてください。
ここまで読んでいただきありがとうございました。
