クラス名を分かりやすくしたい

はじめに

今回は私がCSSのクラスの命名規則であるPRECSSについて学んだことを少し書こうと思います.

なぜ学ぼうと思ったのか

webサイトを作る際,CSSの書く量が増えてくるとかなりややこしくなってくるのを何とかしたいと思ったからです.特に,時間を空けていざ修正作業に入った時にどのクラス名がどこを表しているのかに時間をとられては作業も全然進みません.

クラス名を適当にするとどうなるか

まず,駄目なコードの例として私が初めてHTML,CSSを触った時に作った自己紹介サイトのコードの一部を以下に示します.

<div class="myprofile">
        <div class="name">
            <h2>〇〇〇〇</h2>
            <img src="〇〇〇〇.jpg" alt="" width="700px" height="120px">
                <div class="name2 namename">
                    <img src="〇〇〇〇.jpg" alt="" width="300px" height="780px">
                     <div class="name3 namename">
                        <div>
                            <p>〇〇〇〇大学　<br>〇〇〇〇学部　〇回生</p>
                            <img src="〇〇〇〇.jpg" alt="" width="600px" height="300px">
                        </div>
                        <div class="birthday">
                            <p>生年月日<br>〇〇〇〇年 〇〇月 〇〇日</p>
                            <img src="〇〇〇〇.jpg" alt="" width="600px" height="300px">
                        </div>
                    </div>
                </div>
        </div>
</div>

今見返してみるとなかなかにやばいクラス名をつけていることがわかりますね.このようなクラス名だと,CSSを書いているときや後々コードを修正するときにかなり苦労することになることが目に見えています.

CSSの命名規則-PRECSS-

CSSの命名規則はいろいろ種類があるのですが今回はPRECSSという命名規則を紹介したいと思います.PRECSSの特徴としてクラス名に2文字の接頭辞をつけることが挙げられます.また,CSSを役割別に6つのグループに分割し,それぞれに対して規則を設けているという特徴があります.

PRECSSの例

今回は一例としてPRECSSの公式ドキュメントにあるコードを引用したいと思います.

<div class="bl_card">
  <figure class="bl_card_imgWrapper">
    <img alt="Dummy Image" src="//placehold.jp/E13626/fff/1280x718.png?text=Card 1">
  </figure>
  <div class="bl_card_body">
    <h3 class="bl_card_ttl">TITLE HERE</h3>
    <p class="bl_card_txt"> ... </p>
  </div>
  <!-- /.bl_card_body -->
</div>
<!-- /.bl_card -->

このコードを見るとどのクラス名にも接頭辞としてblという二文字の接頭辞が使用されていることがわかります.これはblockの略で複数の子要素を塊として集めたモジュールのことです.今回の例だとカードという一つの塊をブロックモジュールとしています.また,クラス名をアンダーバーでつなげる,複数の単語の場合はローワーキャメルケースを用いるなどの特徴がみてわかりますね.これにより,どこにネストされているのかもすぐに理解することができます.

コメントについて

余談として,divの終了タグの後にコメントが挿入されていることがわかります.これによりdivの終了タグがどの開始タグと対応しているのか一目で見てわかります.これを書くのは面倒くさいように見えますが実は|cを用いて簡単に書くことができます.例えば,

div.example|c

こう書いた後にENTERキーを押すと,

<div class="example"></div>
<!-- /.example -->

のように展開して書くことができます.

まとめ

今回はPRECSSについて一部だけですが簡単に紹介しました.気になった方はぜひ公式ドキュメントを確認してみてください.拙い文章でしたが最後まで読んでいただきありがとうございました.

参考文献