Single Selector Method(SSM/シングルセレクタメソッド)

CSSにおいて「1つのセレクタは、1か所でのみ定義する」ことを原則とした設計・記述メソッドです。

セレクタの重複定義や上書きを前提とせず、最初の設計段階で役割と責務を明確にしたうえでスタイルを割り当てることで、後工程の修正・迷い・衝突を最小限に抑えることを目的としています。

SSMが必要とされる理由

CSSのトラブルや作業遅延の多くは、「どこで何が定義されているのか分からない」状態から発生します。

1. 同じセレクタが複数ファイルで定義されている
2. 上書き前提の記述が増え、影響範囲が読めない
3. 修正のたびに既存スタイルを壊す不安が生じる

SSMは、こうした状況を構造的に発生させないための考え方です。 「あとから足す」ではなく、「最初に決め切る」ことで、CSSを積み上げる作業から、設計する作業へと変えます。

SSMの基本原則

SSMでは、以下の前提を共有します。

1. セレクタは一意である
2. 同一セレクタの再定義・上書きは行わない
3. 見た目ではなく役割・意味で命名する
4. 変更は「追記」ではなく「定義の見直し」で対応する

この原則により、「どこを直せばよいか分からないCSS」から「直す場所が即座に分かるCSS」へと変わります。

SSMを採用するメリット

SSMを取り入れることで、次のような効果が得られます。

1. 修正時に影響範囲を即座に把握できる
2. 不要な上書きや!importantが不要になる
3. CSSの読み返し・引き継ぎコストが大幅に下がる
4. コーディング速度が安定して速くなる

特に実務では、「速さ」よりも「想定通りに仕上がる」「後から直しやすい」ことが評価されます。 SSMは、その両方を同時に実現するための設計思想です。

他のCSS設計手法との違い

SSMは、BEMやFLOCSSなどの既存手法を否定するものではありません。 それらが「命名規則」や「レイヤー構造」に重きを置くのに対し、SSMは定義の一意性そのものに焦点を当てています。

1. BEM：構造と役割を命名で表現
2. FLOCSS：責務ごとにレイヤー分離
3. SSM：セレクタを重ねないという原則

そのため、SSMは他手法と併用可能であり、「ルールが増えすぎて運用できない」状態を防ぐ、思考の軸として機能します。

SSMが向いている現場・人

1. 修正・追加が頻繁に発生する案件
2. 少人数、または引き継ぎ前提の現場
3. CSSで「毎回迷う」「時間が読めない」と感じている人

SSMは、特別なスキルよりも判断の仕方を揃えることを重視するメソッドです。 だからこそ、経験年数に関係なく効果を発揮します。