Class B 規約

Version: 1.2.0 / Rules: 4 (Class B; all rules: A13 / B4 / C5)

既存のStylelint標準ルールで機械強制する。

Naming

概要

クラス名は kebab-case で書く。snake_case・camelCase・大文字始まりは禁止。接頭辞部分に限り特殊事情（Angular等）で camelCase を許容。

根拠

記法を1つに固定し、命名で「迷う・考える」コストを排除するため。

Good

.good-class-definition { }

Bad

.snakecase_class {}
.camelCaseClass {}
.Has-Capital-CLASS {}

AI/レビューで見る点

新規クラスは全小文字ハイフン区切りで命名する。アンダースコアや大文字を使わない。 .g- / .x- / .mode- 接頭辞クラスもこの kebab-case 形式に従う。

概要

CSS変数（Custom Property）名は全小文字ハイフン区切り。snake_case・camelCase 禁止。

根拠

命名記法をクラスと揃え、揺れをなくすため。

Good

--base-margin: 12px;
--base-padding: 12px;

Bad

--base_margin: 12px;
--basePadding: 12px;

AI/レビューで見る点

Custom Property 名は kebab-case で書く（–base-margin）。–v- 接頭辞もこの形式に従う。

概要

#id によるスタイル指定を禁止。クラスで表現する。

根拠

詳細度の暴走を避け、上書き事故を防ぐため。

Good

.main { }
.main-list { }

Bad

#main { }
#main ul { }

AI/レビューで見る点

スタイル指定は必ずクラスで行う。ID セレクタ（#foo）をスタイルに使わない。

概要

@layer・@scope を原則禁止（規約遵守なら不要。外部ライブラリ前提時のみ例外）。

根拠

規約の詳細度・分割方針で不要になるため、覚えることを減らす。

Good

/* @layer / @scope は使用しない */

Bad

@layer base { … }
@scope (.card) { … }

AI/レビューで見る点

@layer / @scope を書かない。詳細度は規約のファイル分割・命名で管理する。