1.命名によるパーツの分類、管理
CSSのトラブルの最も大きな原因は、「CSSは全てがグローバルである」という言語としての根本的な仕様にある。「グローバルである」とは、あるセレクタで定義したCSSのルールは、そのCSSファイルを読み込んでいる全てのページのあらゆる場所からアクセスできるため、「特定のパーツにだけこのスタイルを適用させる」といったスタイルの分類・管理をする手段が言語仕様として存在しないことを意味する。
ある機能の影響範囲を定める仕組みのことをプログラミングの世界では「スコープ」と呼ぶが、CSSにはこの「スコープ」の仕組みが存在しない。したがってCSS自体でスタイル定義の影響範囲を明確にし、そのスタイルが適用されるパーツを分類・管理するためには、セレクタの命名方法を工夫するしかない。いわゆる「CSS設計」と呼ばれるものの主な目的の1つは、セレクタの命名方法をルール化して、スタイル定義とそれが適用されるパーツを適切に分類・管理できるようにすることにある。
2.破錠を防ぎ、長期メンテナンスを可能にする
- 予測しやすい（Predictable）
セレクタ名を見ただけでどこで使われるべきものか、どんなスタイルが適用されるのか分かりやすいものが「予測しやすい」CSSであると言える。これは主にセレクタの「命名規則」によって実現される。 - 再利用しやすい（Reusable）
Webサイトのある部品が、どこに配置されても問題ないように定義されたものが「再利用しやすい」CSSであると言える。これは主にセレクタの「詳細度」を適切に管理し、かつ再利用可能なコンポーネントの単位をあらかじめ適切に設定しておくことで実現される。 - 保守しやすい（Maintainable）
Webサイトが運用段階に入って新しい部品が追加されたり、既存の部品のスタイルが修正されることになっても、既存のルールに則って誰でも同じように書けるようになっているものが「保守しやすい」CSSであると言える。何よりもルールが明確で分かりやすいことが重要である。 - 拡張しやすい（Scalable）
サイト開発者の人数が増えても人が変わっても、最小限の学習コストでルールを理解して同じように管理できるようになっているものが「拡張しやすい」CSSであると言える。
