【初心者向け】CSSにおける命名規則ってなに？CSS設計と併せて解説

HTMLやCSSを学んでいくうえで必ずといっていいほど悩む部分が、クラス名の決め方です。

ただの英単語にしたら良いわけではなく、Webサイトが完成した後のことも考えてクラス名をつける必要があります。そんな時に考えなければならないのが命名規則です。

命名規則を理解するだけで簡単にクラス名を決めることができるので、最初のうちに理解しておきたいパートになります。

記事の後半では初心者にも使いやすいCSSの命名規則についても紹介していますので最後までご覧ください。

CSSの命名規則ってなに？

CSSにおける命名規則とは、クラス名を付ける際に一定の規則を設けることです。
簡単な例を紹介します。

CSS
.works__img{
  width: 100%;
}
.works__txt{
  font-size: 16px;
}
.contact__img{
  width: 50%;
}
.contact__txt{
  font-size: 10px;
}

上記のコードでは、 worksやcontactでセクションを分けて、その後に画像やテキストを連想させるようなクラス名を指定しています。

命名規則とはこのように規則性を持たせるとともに、クラス名からどの部分のCSSであるかをわかりやすくするものです。

CSS設計において命名規則は非常に重要ですので、その関連性について解説します。

CSS設計を考えると命名規則は必須

CSS設計をするうえで非常に重要な4つの考え方があります。

上記4つは必ず意識してCSSを記述していかなければなりません。

それぞれを簡単に説明します。

拡張しやすい

Webサイトを作るときは一人かもしれませんが、修正や管理をするのは他の人の可能性もあります。

その時に、CSSを誰がみても管理することができれば「拡張しやすい」と言えるでしょう。クラス名が自分しかわからない名前では、拡張しにくいので命名規則が大事になります。

保守しやすい

新しい機能やクラスを追加したい時に、既存にあったクラス名や機能に影響を与えないことが「保守しやすい」CSSとなります。

間違えて既存のクラス名と同じ命名をしてしまうと、表示が崩れてしまい、大掛かりな修正が必要になることもあります。

予測しやすい

クラス名を見た時に、どこの場所にどのような変更を与えるかを「予測しやすい」ようにしておくことが大切です。

クラス名が全く関係のない名前だと、HTMLとCSSを毎回見比べる必要があるためコストもかかります。

クラス名を付ける時点で、予測しやすい命名をするように心がける必要があります。

再利用しやすい

CSSの上で記述したものが、Webサイトの下の方でも「再利用しやすい」ように記述することが大切です。

同じ要素に同じ値を指定しているのに、違うクラス名を命名して記述することは、作業量が増えるだけでなく、コード量も増えてしまいWebサイトの表示速度などに影響を与えてしまいます。

同じ要素に同じ値を指定するときは、再利用できるように一つのクラスにまとめておきましょう。

初心者にも使いやすい命名規則はBEM

ここまでは、命名規則の概要とCSS設計について解説してきました。しかし、初心者はどのように命名規則を設ければ良いかわからないでしょう。

そこで、今回は初心者にも使いやすいCSSの命名規則であるBEMについて解説します。

BEMについて解説

BEMとは、Block、Element、Modifierの頭文字を取ったもので、Yandex社によって提唱されました。

クラス名をBlock、Element、Modifierに分けて、アンダースコア（_）で繋いで命名します。

基本的にBEMはクラス名にのみ適用し、全ての文字を小文字で指定することが基本となります。

コード例を示します。

CSS
.menu__txt_red{
color:red;
}

上記のコードでは、menuがBlock、txtがElement、redがModifierとなります。

それでは、BEMを構成する3つについて詳しく解説します。

Block

Blockは、その名のとおりブロックが何を表しているかで名前を決定します。

先程のコードの例でいうとmenuがBlockです。

menuはWebサイトの上部にあるメニューブロックを指します。

他にも、検索ブロックであればsearchやお問い合わせブロックであればcontactをBlockに当てることがあります。

Element

Elementは、ブロック内の要素に対してそれぞれクラス名を付与します。

例えば、menuブロックの中のテキストであれば以下となります。

CSS
.menu__txt{
color:red;
}

他にも、contactブロック内の画像であれば以下となります。

CSS
.contact__img{
width:50%;
}

上記のように、ブロックの中のアイテムを指定する際に、ElementをBlockに繋いでクラス名を命名します。

Modifier

Modifierは、Elementの中から一部分だけ装飾を変更する場合などに使用します。

例えば、Elementで指定した一部分を変更したい時にModifierを指定します。

CSS
.menu__list--bold{
 font-weight:bold;
}

上記のコードでは、Blockのmenuの中にあるlistの一部分をboldにするときにクラス名を付与します。

上記のようにBEMは命名規則が非常にわかりやすい構造になっています。

BEMをそのまま使うのも良いですが、自分なりに工夫して使うことも可能です。

そのかわり、CSS設計の基本を忘れないように注意しましょう。

CSSにおける命名規則:まとめ

CSSにおける命名規則について、CSS設計とともに解説してきました。

CSSを記述する際に命名規則を決めることで、CSS設計がしやすくなります。そのコードを誰が見てもわかりやすいクラス名にすることが最重要ともいえます。

今まで適当に決めていたクラス名をBEMなどを用いて規則性を持たせるように心掛けましょう。