SMACSS

命名規則

.alert {
- .alert.success {
+ .alert-success {
- .alert.warning {
+ .alert-warning {
- .alert.error {
+ .alert-error {
…
.warning { // 汚染されてしまう

ベースとなるコンポーネント名を名前空間として継承した命名にすること - クラス名の重複によるスタイルの強豪と汚染のリスクを減らせる - クラス名を見て、どのコンポーネントの拡張かがわかる - セレクタの詳細度を減らせる