お問い合わせアイコン

お問い合わせ

トップニュース新人Webデザイナー必見！現場に入る前に知っておくべきCSS 3大命名規則

新人Webデザイナー必見！現場に入る前に知っておくべきCSS 3大命名規則

はじめまして、フルバランスの池田です。

新人Webデザイナーの皆さん、クラス名、似たような名前ばかりつけてしまって管理に困ったことありませんか？
今回は、そんな新人Webデザイナー向けに現場で実際に使われているCSSの命名規則についてご紹介します！

そもそもCSSの命名規則が必要な理由

CSSの命名規則がないと・・・

クラス名の付け方

ただでさえ頭を抱えてしまうクラス名の付け方。
一人で作業をするのであれば好きなように付けてしまうこともできますが、WEB制作の現場ではチームでの作業が基本です。
複数人で作業する場合、各々が好き勝手にクラス名を付けていたら困りますよね。
混乱を避ける為にも、そこには明確なルールが必要です。

CSS命名規則を定める3つのメリット

CSS命名規則を定めることで様々なメリットが生まれます！

  • クラス名の名付けに頭を悩ませる必要がない！
  • 見ただけでもある程度内容が推測できるので時間が経ってからの修正や複数人での作業の際も便利！
  • 内容を追加・更新する際に既存CSSを変更する必要がない！

ですが、ルールを設けるからといってやみくもにチームごとのローカルルールなどに依存しすぎるのも後々トラブルに繋がりやすくなりますよね。
そこで、今回は代表的な3つの命名規則をご紹介します。

1.パーツに分けて組み立てる！「OOCSS」

Object Oriented CSSという名の通り、プログラミングにおけるオブジェクト指向（誰かが作ったプログラムを他の人でも再利用できる整理された形）の考え方をCSSの設計にも取り入れようという考え方です。

OOCSSの2つの特徴

1.入れ物と中身を分けて考える
.containerの中の.boxといったその物の場所に依存した関係を良しとせず、それぞれを独立したパーツとして扱い、別の場所・ページで再利用出来るようにします。

2.基本構造と見た目を分けて考える
共通部分は共通部分としてまとめ、見た目のスタイルとは分けて指定することで個々のパーツの再利用性を高めていきます。

使用例

<!--OOCSS-->
<div class="container">
	<h2 class="content-title">title</h2>
	<div class="content content-red"></div>
</div>
<div class="another">
	<h2 class="content-title">title</h2>
	<div class="content content-blue"></div>
</div>

「container」と「another」異なる場所で共通のパーツを使っていますね。
このように場所に依存しない個々のパーツに分けることで、複数のページでパーツを使い回していく手法です。

2.最もメジャーな命名規則「BEM」

「Block」「Element」「Modifier」の頭文字を取ったもので、要素をこの３つのどれかにあてはめて命名していく方法です。

  • Block – 一つの独立したかたまり、親要素
  • Element – Blockに属する子要素、Blockの後ろにアンダースコアを二つ付ける（__）
  • Modifier – BlockやElementが変化した状態、ダッシュを二つ付ける（–）

このようなBEMの考え方に基づいたクラス名の命名方法を「MindBEMding」と呼びます。

使用例

<!--BEM-->
<div class="block">
	<div class="block__element"></div>
	<div class="block__element--modifier"></div>
</div>
<div class="content">
	<h2 class="content__title">title</h2>
	<div class="content__box--large"></div>
</div>

最初は冗長的なクラス名に戸惑うかもしれませんが、一度理解してしまえばクラス名を見ただけでどのような内容が書かれているか想像ができますね。

3.カテゴリー分けで役割を明確に「SMACSS」

Scalable and Modular Architecture for CSSの略称で、OOCSSやBEMの流れを受けて考案されたCSS設計思想の一つです。
SMACSSではCSSを5つのカテゴリーに分類することが特徴です。

  • Base – リセットCSSなど、サイト全体のスタイルを定義
  • Layout – 位置に関する指定、頭に「l-」をつける
  • Module – 再利用可能なパーツ、子要素の頭には親要素の名前をつける
  • State – LayoutやModuleが変化した状態、頭に「is-」をつける
  • Theme – 色などの見た目に関する指定、頭に「theme-」もしくは「t-」をつける

使用例

<!--SMACSS-->
<div class="l-header">
	<div class="l-grid-01">
		<div class="module is-active">
			<p class="module-text">text</p>
		</div>
	</div>
</div>
<div class="l-container">
	<div class="l-grid-01">
		<div class="content theme-red"></div>
	</div>
</div>

接頭辞の付け方など独自のルールに慣れるまでは大変そうですが、それぞれの役割を明確にすることでCSSの簡略化を図っています。

CSS命名規則のまとめ

「名前ぐらいは聞いたことあったけど…」という方はもちろん「当然知ってたよ！」という方も、これらの代表的な命名規則を知っているのと知っていないのとでは大違いです！

これから現場で「こんなの見たこと無いしわからない！」とならないためにも、まだまだある命名規則について一緒に勉強していきましょう！

full balance
full balance