もっともっと、もっと先へ。株式会社アットワークMore and more,
further and further.

Tips

2025年6月2日

CSS可読性を高める命名規則 – 完全ガイド

CSSの命名規則は、大規模なWebサイトやチーム開発では特に重要です。適切な命名により、スタイルの管理・保守・拡張が格段に楽になります。

1. CSS命名の基本原則

1.1 ケバブケース（kebab-case）を使用

CSSでは単語間をハイフンで区切るケバブケースが標準です。


css

/ 良い例 /

.main-navigation { }

.user-profile-card { }

.submit-button { }

.error-message { }



/ 悪い例 /

.mainNavigation { }    / camelCase /

.user_profile_card { } / snake_case /

.SubmitButton { }      / PascalCase /

1.2 意味のある名前を付ける

見た目ではなく、機能や役割を表現する名前を使用します。


css

/ 良い例：機能・役割ベース /

.primary-button { }

.warning-message { }

.sidebar-navigation { }

.article-content { }



/ 悪い例：見た目ベース /

.red-button { } / 色が変わったら意味不明 /

.big-text { }   / サイズが変わったら矛盾 /

.left-box { }   / レイアウト変更で破綻 /

2. BEM（Block Element Modifier）記法

2.1 BEMの基本構造

BEMは最も広く採用されているCSS命名手法の一つです。


.block__element--modifier

– Block: 独立したコンポーネント
– Element: Blockの構成要素
– Modifier: BlockやElementのバリエーション

2.2 Block（ブロック）

独立して存在できるコンポーネントです。


css
	
/ カードコンポーネント /

.card {

  border: 1px solid ddd;

  border-radius: 8px;

  padding: 20px;

}



/ ナビゲーションコンポーネント /

.navigation {

  display: flex;

  background-color: fff;

}



/ ボタンコンポーネント /

.button {

  padding: 10px 20px;

  border: none;

  cursor: pointer;

}

2.3 Element（エレメント）

Blockの構成要素で、Block外では意味を持ちません。


css
	
/ カードの構成要素 /

.card__header {

  border-bottom: 1px solid eee;

  margin-bottom: 15px;

  padding-bottom: 15px;

}



.card__title {

  font-size: 1.5rem;

  font-weight: bold;

  margin: 0;

}



.card__content {

  line-height: 1.6;

}



.card__footer {

  margin-top: 20px;

  padding-top: 15px;

  border-top: 1px solid eee;

}



/ ナビゲーションの構成要素 /

.navigation__list {

  display: flex;

  list-style: none;

  margin: 0;

  padding: 0;

}



.navigation__item {

  margin-right: 20px;

}



.navigation__link {

  text-decoration: none;

  color: 333;

  padding: 10px 15px;

  display: block;

}

2.4 Modifier（モディファイア）

BlockやElementのバリエーションを表現します。


css

/ ボタンのバリエーション /

.button--primary {

  background-color: 007bff;

  color: white;

}



.button--secondary {

  background-color: 6c757d;

  color: white;

}



.button--large {

  padding: 15px 30px;

  font-size: 1.2rem;

}



.button--small {

  padding: 5px 10px;

  font-size: 0.9rem;

}



/ カードのバリエーション /

.card--featured {

  border-color: 007bff;

  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.1);

}



.card--compact {

  padding: 10px;

}



/ ナビゲーションリンクの状態 /

.navigation__link--active {

  background-color: 007bff;

  color: white;

}



.navigation__link--disabled {

  color: ccc;

  cursor: not-allowed;

}

2.5 BEMの実際の使用例


html


<div class="user-profile">

　<div class="user-profile__header">

　　<img class="user-profile__avatar user-profile__avatar--large" src="avatar.jpg" alt="User Avatar">

　　　<div class="user-profile__info">

　　　　<h2 class="user-profile__name">田中太郎</h2>

　　　　<p class="user-profile__title">フロントエンドエンジニア</p>

　　　</div>

　　</div>

　　<div class="user-profile__content">

　　　<p class="user-profile__bio">Webフロントエンド開発を専門としています。</p>

　　　　<div class="user-profile__stats">

　　　　<div class="user-profile__stat">

　　　　<span class="user-profile__stat-number">150</span>

　　　　<span class="user-profile__stat-label">プロジェクト</span>

　　　</div>

　　　<div class="user-profile__stat">

　　　　<span class="user-profile__stat-number">50</span>

　　　　<span class="user-profile__stat-label">チームメンバー</span>

　　</div>

　</div>

　</div>

　　<div class="user-profile__actions">

　　　<button class="button button--primary">フォロー</button>

　　　<button class="button button--secondary">メッセージ</button>

　　</div>

</div>



css

.user-profile {

  max-width: 400px;

  border: 1px solid ddd;

  border-radius: 12px;

  overflow: hidden;

  background: white;

}



.user-profile__header {

  display: flex;

  align-items: center;

  padding: 20px;

  background: linear-gradient(135deg, 667eea 0%, 764ba2 100%);

  color: white;

}



.user-profile__avatar {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  margin-right: 15px;

  border: 3px solid white;

}



.user-profile__avatar--large {

  width: 80px;

  height: 80px;

}



.user-profile__info {

  flex: 1;

}



.user-profile__name {

  margin: 0 0 5px 0;

  font-size: 1.4rem;

  font-weight: bold;

}



.user-profile__title {

  margin: 0;

  opacity: 0.9;

  font-size: 0.9rem;

}



.user-profile__content {

  padding: 20px;

}



.user-profile__bio {

  margin: 0 0 20px 0;

  line-height: 1.6;

  color: 555;

}



.user-profile__stats {

  display: flex;

  justify-content: space-around;

  margin-bottom: 20px;

}



.user-profile__stat {

  text-align: center;

}



.user-profile__stat-number {

  display: block;

  font-size: 1.5rem;

  font-weight: bold;

  color: 333;

}



.user-profile__stat-label {

  font-size: 0.8rem;

  color: 777;

}



.user-profile__actions {

  padding: 0 20px 20px;

  display: flex;

  gap: 10px;

}

3. その他の命名手法

3.1 OOCSS（Object-Oriented CSS）

オブジェクト指向の考え方をCSSに適用した手法です。


css

/ 構造とスキンを分離 /

/ 構造 /

.media {

  display: flex;

  align-items: flex-start;

}



.media__object {

  margin-right: 15px;

}



.media__body {

  flex: 1;

}



/ スキン /

.media--comment {

  padding: 15px;

  border-bottom: 1px solid eee;

}



.media--notification {

  background-color: f8f9fa;

  border-left: 4px solid 007bff;

  padding: 10px 15px;

}

3.2 SMACSS（Scalable and Modular Architecture for CSS）

CSSを5つのカテゴリに分類する手法です。


css

/ Base（ベース）: デフォルトスタイル /

html, body {

  margin: 0;

  padding: 0;

  font-family: Arial, sans-serif;

}



/ Layout（レイアウト）: ページの大きな構造 /

.l-header {

  position: fixed;

  top: 0;

  width: 100%;

}



.l-sidebar {

  width: 250px;

  float: left;

}



.l-main {

  margin-left: 250px;

}



/ Module（モジュール）: 再利用可能なコンポーネント /

.card {

  border: 1px solid ddd;

  border-radius: 4px;

}



.button {

  padding: 10px 20px;

  border: none;

}



/ State（状態）: モジュールの状態変化 /

.is-hidden {

  display: none;

}



.is-active {

  background-color: 007bff;

  color: white;

}



.is-disabled {

  opacity: 0.5;

  pointer-events: none;

}



/ Theme（テーマ）: 見た目のバリエーション /

.theme-dark .card {

  background-color: 333;

  color: white;

}



.theme-dark .button {

  background-color: 555;

}

4. ユーティリティクラス

単一の機能を持つ小さなクラスです。


css

/ スペーシング /

.m-0 { margin: 0; }

.m-1 { margin: 0.25rem; }

.m-2 { margin: 0.5rem; }

.m-3 { margin: 1rem; }



.p-0 { padding: 0; }

.p-1 { padding: 0.25rem; }

.p-2 { padding: 0.5rem; }

.p-3 { padding: 1rem; }



/ テキスト /

.text-left { text-align: left; }

.text-center { text-align: center; }

.text-right { text-align: right; }



.text-small { font-size: 0.8rem; }

.text-large { font-size: 1.2rem; }



.font-bold { font-weight: bold; }

.font-normal { font-weight: normal; }



/ ディスプレイ /

.d-none { display: none; }

.d-block { display: block; }

.d-flex { display: flex; }

.d-grid { display: grid; }



/ フレックス /

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.align-center { align-items: center; }



/ 色 /

.text-primary { color: 007bff; }

.text-secondary { color: 6c757d; }

.text-danger { color: dc3545; }

.text-success { color: 28a745; }



.bg-primary { background-color: 007bff; }

.bg-light { background-color: f8f9fa; }

.bg-dark { background-color: 343a40; }

5. レスポンシブ対応の命名

5.1 ブレークポイント接頭辞


css

/ モバイルファースト /

.col-12 { width: 100%; }



/ タブレット以上 /

@media (min-width: 768px) {

  .col-md-6 { width: 50%; }

  .col-md-4 { width: 33.333%; }

  .text-md-left { text-align: left; }

  .d-md-flex { display: flex; }

}



/ デスクトップ以上 /

@media (min-width: 1024px) {

  .col-lg-3 { width: 25%; }

  .col-lg-8 { width: 66.666%; }

  .text-lg-center { text-align: center; }

}

5.2 コンテナクエリ対応


css

.card {

  container-type: inline-size;

}



/ カードが小さい時 /

@container (max-width: 300px) {

  .card__title {


    font-size: 1rem;

  }

  

  .card__content {

    display: none;

  }

}



/ カードが大きい時 /

@container (min-width: 500px) {

  .card {

    display: flex;

  }

  

  .card__image {

    flex: 0 0 200px;

  }

}

6. プロジェクト固有の命名規則

6.1 名前空間の使用


css

/ プロジェクト固有の接頭辞 /

.shop-product-card { }

.shop-cart-item { }

.shop-checkout-form { }



/ 第三者ライブラリとの衝突回避 /

.my-app-button { }

.my-app-modal { }

.my-app-dropdown { }

6.2 コンポーネントライブラリ向け


css

/ デザインシステムのトークン使用 /

.ds-button {

  padding: var(--spacing-md);

  font-size: var(--font-size-base);

  border-radius: var(--border-radius-sm);

}



.ds-button--primary {

  background-color: var(--color-primary);

  color: var(--color-primary-contrast);

}



.ds-button--size-large {

  padding: var(--spacing-lg);

  font-size: var(--font-size-lg);

}

7. 命名のベストプラクティス

7.1 避けるべき命名


css

/ 悪い例 /

.red { }    / 色が変わったら破綻 /

.big { }    / 抽象的すぎ /

.left { }   / レイアウト変更で矛盾 /

.div1 { }   / 意味不明 /

.style1 { } / 何のスタイル？ /

.temp { }   / 一時的なものは残りがち /

.new { }    / いつまで"新しい"？ /

7.2 推奨する命名


css

/ 良い例 /

.primary-button { }     / 役割が明確 /

.warning-message { }    / 目的が分かる /

.sidebar-navigation { } / 場所と機能 /

.article-excerpt { }    / コンテンツの種類 /

.user-avatar { }        / 具体的な要素 /

.loading-spinner { }    / 状態と見た目 /

.mobile-menu { }        / デバイス固有 /

7.3 チーム開発での統一


css

/ 命名規則ドキュメントの例 /



/ プロジェクト命名規則

  1. BEM記法を基本とする

  2. ケバブケースを使用

  3. 状態クラスは is- または has- で始める

  4. レイアウトクラスは l- で始める

  5. ユーティリティクラスは u- で始める

  6. JavaScriptフック用は js- で始める（CSSでスタイル禁止）

 /



/ 状態クラス /

.is-active { }

.is-loading { }

.has-error { }



/ レイアウトクラス /

.l-container { }

.l-grid { }

.l-flex { }



/ ユーティリティクラス /

.u-text-center { }

.u-margin-bottom { }

.u-visually-hidden { }



/ JavaScriptフック（スタイル記述禁止） /

.js-toggle-menu { }

.js-form-validator { }

.js-carousel { }

まとめ

CSS命名規則の要点：

1. 一貫性: チーム全体で同じルールを適用
2. 予測可能性: 名前から機能・役割が推測できる
3. 保守性: 後から変更・拡張しやすい
4. スケーラビリティ: プロジェクトが大きくなっても破綻しない
5. 協働性: チームメンバーが理解しやすい

適切な命名規則により、CSSの保守性と開発効率が大幅に向上します。プロジェクトの特性とチームの合意に基づいて、最適な手法を選択しましょう。

一覧に戻る

2025年注目のCSS実装手法

もっともっと、もっと先へ。株式会社アットワークMore and more, further and further.