【初心者向け】「命名規則を理解しよう」 Web制作を独学で学ぶ人の為のコーディング講座 part4

Web制作を独学で学ぶ人のためにHTML・CSSを実務で通用するレベルで学習していきます。
それでは早速始めていきます。

「命名規則を理解しよう」

今回のテーマは、「命名規則を理解しよう」です。
命名規則ってそもそも何なのかと言いますと、class名の付け方を統一するための規則のことです。

では、何故命名規則を理解する必要があるのかというと、複数理由があります。

• 自分自身のコーディングをスムーズにするため
• 修正、使い回しをできるようにするため
• 他人が自分のコードを見ても理解しやすくするため
• 上と逆で、自分が他人のコードを見て理解できるようになるため

実務では、webサイトの修正案件等で他人が書いたコードを見ることになります。
そのときに、命名規則が理解できていないと時間がかかったり、コードが汚くなったりします。

実際に、命名規則があるないでどのくらい違うのか見てみましょう。

命名規則ないパターン

<div class="box">
    <div class="box-a">
      <img src="" alt="">
    </div>
    <div class="boxB">
      <h3></h3>
      <p></p>
      <div></div>
    </div>
</div>

命名規則あるパターン

<div class="card">
  <div class="card__img">
    <img src="" alt="">
  </div>
  <div class="card__body">
    <h3></h3>
    <p></p>
    <div class="btn"></div>
  </div>
</div>

命名規則がないバージョンは、修正や使い回しをするのにすごい労力を使いそうですね。コードを理解するのにも苦労します。
一方、命名規則あるバージョンでは、修正や使い回しは簡単にできそうですし、コードの理解もしやすいです。

命名規則が大事だと分かったので、命名規則の決め方をお話しします。
有名な命名規則として、以下の命名規則があります。

• OOCSS
• BEM
• SMACSS
• FLOCSS
• オレオレCSS

SMACSSやFLOCSSは慣れるまで難しく感じると思いますので、今回は説明しません。

詳細は公式サイトや他のブログに譲るとして、ここではわかりやすくざっくりとをモットーにやっていきます。

OOCSS

OOCSSとは、Object Oriented CSSの略称です。
構造と見た目の分離ということがOOCSSの提唱するところです。

構造と見た目は何なのかと言いますと、構造は横幅や高さ等で見た目は色です。

OOCSSを使用して書くとこんな感じのクラス名になります。

<div class="box">
  <a href="" class="btn btn-red">赤ボタン</a>
  <a href="" class="btn btn-blue">青ボタン</a>
  <a href="" class="btn btn-green">緑ボタン</a>
</div>

.btn {
  width: 200px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.btn-red {
  background-color: red;
}

.btn-blue {
  background-color: blue;
}

.btn-green {
  background-color: green;
}

btnという共通のクラスを作成(構造)して、.btn-red等で固有の見た目(色)を指定しています。

BEM

BEMとは、Block、Element、Modifierの頭文字を取った略称です。
ブロック、要素、修飾子のことですが、本講座でも使用している命名規則です。

BEMを使用した場合は、こんな感じのクラス名になります。

<div class="card">
  <div class="card__head"></div>
  <div class="card__body">
    <h3 class="card__heading"></h3>
  </div>
</div>

bloc__element–modifierの形式でクラス名をつけます。

考え方としては、ブロックが一番の大枠でその中に要素があるというものになります。
本講座のHTML・CSS編 part3 「カードを作成してみよう」で作成したカードを例に考えます。

カードの中に画像とタイトル、テキスト、ボタンがあります。
カードの中の画像とタイトル、テキストはカードの場所以外では使われなさそうです。
ボタンは、他の箇所でも使用されるかもしれません。

大事なこととして、ブロックが独立していることが大事です。
つまり、ブロックは取り外しが可能で、外側に影響を及ぼさないことが必要です。

例えば、ブロックの外側にマージンを指定すると、他のところでもそのマージンの影響を受けることになります。
そうなると、使いまわしにくくなるため必ず外部には影響を及ぼさないようにしましょう。

.card {
  margin: 50px;
}

これは他の箇所に影響を及ぼすのでNG。

オレオレCSS

オレオレCSSとは、会社独自または個人独自のルールに則ったCSSです。

これが厄介ですが、かなり多いです。
理解できないこともあります。

現場では、説明がついているわけではないのでコードを見て理解する必要があります。
指定されたルールがある場合はそれに従う必要がありますが、それ以外はオレオレCSSは使用しないようにしましょう。

命名規則を理解すれば世界が変わる

全てを理解する必要はないですが、命名規則を理解するしないでは明らかに見える世界が変わります。
理解できていないと、品質やスピードにもかなり影響が出てきますので基本的なものは理解しておきましょう。

次回は、Web制作を独学で学ぶ人の為の講座 HTML・CSS編 part5「実践演習」です。

それではまた次回お会いしましょう。