クラス名の付け方【マイルール】

皆さんは「クラス名」をつけるときに、迷うことはありませんか？
同じクラス名をつかうとメンテナンス性に欠けますし、かといって「.box01」「.box02」・・・みたいな、規則性とかコンテンツ内容に関係がないクラス名だとちょっとかっこ悪いですよね(＠_＠;)

なので、今回は私流のクラス名の付け方をご紹介しようと思います！

クラスの先頭に「ページ名」をつける

たとえばトップページならば、「top」や「index」、会社概要であれば、「company」をクラス名の先頭にページ名つけて管理すると、CSSを見たときにどのページのコンテンツなのかもわかりやすくなるのでオススメです！

プラスして、コンテンツ内容を付け加えるだけでグッとわかりやすくなります！

コンテンツ内容は、見出しのテキストから引用して英語にしてみたり、リストの場合は「list」、マップの場合は「map」など、コンテンツが何かを表す単語をくっつけるのがオススメです。

例

.index-first（「トップページ」の最初のコンテンツ）

.flow-list（「〇〇の流れ」のリスト）

.company-map（「会社概要」のマップ）

コンテンツ以外でクラス名をつけるときに使います。これは自分の中でもうある程度決まっているので、思いつく限りの箇所を書き出してみます。

ヘッダー要素

「ヘッダー＝header」「グロナビ=gnav」「メインイメージ＝mainimg」

サイド要素

「サイド＝side」「サイドナビ＝s-nav」「インフォメーション＝s-info」

フッター要素

「フッター＝footer」「フッターナビ＝f-nav」

上記の単語を先頭に付けて、プラスしてコンテンツ内容を付け加えるという規則性をもたせます。私は「BEM記法」を主に使用していますのでアンダーバー２つでつないで使用しています。

例

.header__logo（ヘッダーのロゴ）

.s-info__add（サイドの住所（アドレス））

.footer__add（フッターの住所）

まず前提として、見出しのクラス名は「heading」「headline」「title」「label」「name」などを使用することが多いです。

見出しのクラス名はそんな感じでつけたとして、例えばこんな感じの見出しだったら、皆さんはどうしてますか・・・？

見出しの中に、「heading」という英字の見出しと、「大見出しがはいります」という日本語の見出しがありますね。

これ、地味にクラス名付けにくくないですか・・・？（そうでもなかったらごめんなさい(・_・;)）

私の場合は、英字を「sub」「en」、日本語を「main」「ja」などに決めて、「heading」と組み合わせて使用しています。

例

「.heading__sub」「.heading__en」

「.heading__main」「.heading__ja」

あくまで上記内容は、私個人のルールに過ぎないので、ご参考までに。

他にも「こんなルールで使用しています！」などありましたら教えていただけると嬉しいです！