HTML/CSS

見やすいHTML/CSSを書くためにはコーディングルールを導入しよう

デザインカンプを見ながらコーディングしたり、参考になるサイトを見ながら模写をしたり、コーディングをする機会が多いほど経験が積めて勉強になりますよね。

 

ただ、後からコードを見直したCSSが汚くて見にくい。。

 

なんてことが起きてしまいます。

それは、「コーディングのルールを決めてないから」でして、企業に入るとコーディングルールたるものがあって、それに準拠したコーディングが必要になってきます。

 

じゃあ、フリーランスや副業でやってる人はどうか?

個人で自分なりのルールを作ってコーディングする必要がありますね。

 

今回は、コーディングルールが記載されている参考サイトから、自分なりのコーディングルールを考えてみました。

 

 

CSSを綺麗にかくコーディング基本ルール

コーダーによって、書き方はバラバラでいろんなコーディングのやり方があります。

ただし、企業で仕事をするようになったり、チームでプロジェクトを進めるようになれば、自分のコードをたくさんの人が見るようになります。

となると、一定以上の品質を整えるためにも、コーディングの基本ルールが必要みたいです。

 

Googleにもコーディング規約があり、公開されています。

 

参考にしたサイトを元に、自分も取り入れたいルールをまとめてみました。

BEMを使う

BEMBlockElementModifierの略で、HTML/CSSの構成要素を分類して書いていくものです。

 

Block:ブロック

Element:子要素

Modifier:装飾

 

例えば、メニューアイテムの場合、

以下のようになり、Blockが親要素、Elementが子要素になります。

bem-element

 

Modifierは、要素に対して、大きさや色などの装飾を加える分類。

例えば、smallであったり、redというような、大きさや色を指定したりする場合に使います。

bem-modifire

 

 

block」に対して、「element」と「modifire」をそれぞれ「__(アンダースコア2つ)」「_(アンダースコア1つ)」で繋げてセレクタを作ります。

block { }

block__element { }

block_modifier { }

block__element_modifier { }

 

modifierを「––(ハイフン2つ)」で繋ぐmindBEMdingという書き方もあります。

どちらを使ったらいいのかわからないので、とりあえず「–」を使っていこうと思います。

 

ポイントとしては、

クラスの名前だけでHTML要素の意味を伝えられるようにすること

だと思います。

 

ちなみに、Sassとの相性が抜群みたいです。

 

参考記事

 

半角スペース2のインデント

インデントを統一することで見やすくします。

    <header>
             <div class="inner header__inner"><div class="header__logo">
                       <img src="images/logo.png">
                    </div> <div class="header__list">
                      <nav>
                          <ul><li><a href="#">会社情報</a></li>
                            <li><a href="#">ニュースリリース</a></li>
                           <li><a href="#">事業・製品</a></li>
                              <li><a href="#">サービス</a></li>
                           <li><a href="#">採用情報</a></li> </ul>
                   </nav>
                 </div>
               </div>
    </header>

 

インデントを揃えるってことです。

    <header>
        <div class="inner header__inner">
            <div class="header__logo">
                <img src="images/logo.png">
            </div>
            <div class="header__list">
                <nav>
                    <ul>
                        <li><a href="#">会社情報</a></li>
                        <li><a href="#">ニュースリリース</a></li>
                        <li><a href="#">事業・製品</a></li>
                        <li><a href="#">サービス</a></li>
                        <li><a href="#">採用情報</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

 

コロンとバリューの間は空ける

.h1 {

  color: red;

}

 

基本だと思いますが、全てのコードの書き方を統一することで、最終的に見やすいコーディングができそう。

プロパティはアルファベット順に書く

header {
    color: red;
    background-color: blue;
}

こうじゃなくて

 

header {
    background-color: blue;
    color: red; 
}

アルファベット順に記述することで、検索性がよくなります。

 

要素名の指定は最小限にし、classをつける

ul {
    li {
        a {
        }
    }
}

 

こんなのはやめよう、ってことです。基本的に全てにclassをつけるように心がける。

classの方が検索もしやすいし、多分メンテナンスもしやすいはず。

 

 

クラス名の単語が長くなりそうな時はハイフンでつなぐ

単語の先頭の文字を大文字にする「キャメルケース」や、アンダースコアもありますが、

とりあえず使いやすさの問題からハイフンに決めました。

 

クラス名の命名はわかりやすく

クラス名は、どうすればわかりやすいかを考えてつけるようにしていますが、慣れるまでは難しく感じます。

とはいえ、適当につければいいというものでもないんだなーと実感。

 

わかりやすく、クラス名を見ただけでどんな要素なのかを理解できるようにつけるのが理想です。

 

参考記事

 

divの終了タグにはコメントを入れる

    <header>
        
    </header><!--/header-->
  
    <section id="news">

    </section><!--/news-->

これも、検索性向上のためです。

 

誰に見られてもいいように書く

  1. BEM
  2. インデントは半角スペース2
  3. コロンとバリューの間は空ける
  4. プロパティはアルファベット順
  5. classで指定し、要素名の指定は最小限
  6. クラス名の単語はハイフンでつなぐ
  7. クラス名の命名はわかりやすく
  8. divの終了タグにはコメントを入れる

まとめると、こんな感じです。

長々と書いてきましたが、結論は「誰に見られてもいいように書く」ってことです。

コメントだったりクラス名をわかりやすく意識できれば、見やすいコーディングは身についてくるはず。

今は独学で勉強中ですが、「誰かがコードを見る設定」でコーディングをしてみよう。そうすると、自然とわかりやすくしようという意識が働くはず。

 

 

参考にさせていただいた記事