「CSS書いてるとクラス名がよく分からなくなる」
CSSはWebページの見た目を整えるために使いますが、ごり押しで書くと途中から中身が分かりづらくなります。
コーディングは自分の好きなようにが基本ですが、誰も編集できないコードを書いていては今後の業務が難しくなります。
今回は誰もが分かりやすいコードを書く基本について解説します。
この記事を読むことで自分のコードを見やすくして、保守性を高めることができます。
誰も見たことがないような書き方で、一切の説明がないコードは読みたくありませんよね。
体系化された書き方をマスターしましょう。
この順で解説します。
CSSの書き方を学習しましょう。
1.コードが見やすくなるクラス名の決め方
CSSの書き方はひとそれぞれです。
一概に正解はありませんが、今の主流となっているのはBEMです。
この記事ではBEMという設計手法を取り上げます。
どの参考書やCSS設計の解説にも載っており一番ベースになる考え方です。
まず、クラス名は自分の好きな単語を使えます。
クラス名をブロックとして考えてどこを指しているのか明確にします。
具体的にはBlock（ブロック）、Element（構成要素）、Modifier（状態）という単位に分解します。
class=”head__title_border”
上記の場合headがブロック、titleが構成要素、borderが状態を表しており、ひとつのクラス（シングルクラス）で表しています。
こうすることで、「どのブロックにあるのか」「どんな見た目・役割をするのか」がとても分かりやすくなります。
BEMの基本の命名規則は次の通りです。
まず原則ですが、単語通しを”-“（ハイフン）でつなぎます。
例えばmain titleと構成要素を名付けるならば、main-titleです。
つぎに、Block、Element、Modifierの間はそれぞれ”__”（アンダースコア２つ）と”_”（アンダースコア１つ）でつなぎます。
具体的にはmenu__item_redやcontainer__img_smallなどです。
「Block__Elemnt_Modifier」と覚えましょう。
2.コーディング時に気を付けたいCSSの仕組み
先ほどBEMという設計手法を紹介しました。
このような方法が生まれるのは、CSS設計には原則があるからです。
CSS設計の原則は以下の通りです。
1.詳細度が高すぎない
詳細度で調べると説明が多くありますが、詳細度が上がるとCSSの指定は変えづらくなります。
単純に途中から変更が難しくしない、追加が容易であるようにという意味です。
2.クラス名から影響範囲が予想できる
Block__Elementと書くだけでどのモジュールが対象になるか分かりやすくなります。
例えばtitleという単語のクラスだと、コンテンツのタイトルなのか、トップページのタイトルなのか分からなくなります。
大きくBlock分けされているだけで、効率的にコードが書けます。
3.クラス名から見た目・役割が判断できる
同じく何に使われて、どういう装いになるのか大体想像できる書き方をします。
menu__itemだとメニューの項目だとすぐにわかります。
これらの原則を守らないと便利なCSSはすぐに予想外の動きをします。
3.学習に使えるおすすめ書籍
ここまでの内容を何十倍も詳しく書いた書籍を紹介します。
どちらも大変おすすめですが、CSS設計完全ガイドは中級以上の内容です。
読むのにとても時間がかかりますので、入門書籍をお勧めします。
まとめ
CSS設計は一朝一夕で身に付きません。
じっくり腰を据えて、試しながら書き方を練習しましょう。
書き方のおさらいです。
1.設計手法を決める。（今回はBEM）
2.BEMにもとづき、モジュールをブロックとして捉える。
3.クラス名をBlock__Element_moduleとして書く。
設計手法を取り入れて見やすくコードを書きましょう！という記事でした。
