CSS
命名規則・コンポーネント設計
BEM記法によるクラス命名規則とTailwind CSSとの併用方針
クラスの命名規則
クラス名は BEM（Block Element Modifier）記法で記述してください。
単語間はハイフン（-）でつなぎ、ブロック名とエレメント名はアンダースコア 2 つ（__）、モディファイアはハイフン 2 つ（--）でつなぎます。
例：.block-name__element--large
キャメルケースの使用
プロジェクト内で統一されていれば、キャメルケースで記述しても構いません。その場合は Stylelint の
プロジェクト内で統一されていれば、キャメルケースで記述しても構いません。その場合は Stylelint の
selector-class-pattern ルールを適切に変更してください。修飾子（modifier）
モディファイアは、ブロックやエレメントの「見た目」「状態」「ふるまい」などの違いを表現するためのもので、
- その要素の見た目（例：「どのサイズか？」や「どのテーマか？」→ xs, primary）
- 状態（例：「他とどう違うか？」→ disabled, focused など）
- ふるまい（例：「どのように動作するか？」→ block__element--left など）
を表します。
<!-- サイズやテーマを表す例 -->
<a class="button button--xs button--primary">
小さいサイズ・プライマリカラーのボタン
</a>
<!-- 状態を表す例 -->
<button class="button button--disabled">無効状態のボタン</button>
<button class="button button--focused">フォーカスされたボタン</button>
<!-- ふるまいを表す例 -->
<div class="tooltip tooltip--left">左方向に表示されるツールチップ</div>
クラス命名の原則
原則としてすべての要素にクラスを付与します。ただし、どのコンポーネントに帰属するかが明確な場合や、エレメントの詳細度の差を小さくできる場合は省略しても構いません。
セレクタの多用
ライブラリなどで定義される外部クラスとのコンフリクトを防ぐため、単純な子セレクタ・子孫セレクタの多用は避けてください。
クラス名の省略
クラス名はできる限り省略せず、意味が明確な名前を付けてください。
| ❌ 悪い例 | ✅ 良い例 |
|---|---|
| ttl | title |
| btn | button |
| txt | text |
属性の利用方針
id 属性はスタイルシートの目的では指定しないでください。data-* 属性は、JavaScript で状態を変化させる場合のみ使用し、スタイルのみを目的として利用することは避けてください。
Tailwind CSS との併用
Tailwind CSS を使用する場合でも、BEM 記法の原則は維持します。
コンポーネント固有のスタイルには BEM クラスを使用し、レイアウトやスペーシングなどの基本的なスタイリングには Tailwind ユーティリティクラスを使用します。
詳細は Tailwind CSS ガイドライン を参照してください。