tl;dr;
- CSSでは同じセレクタを繰り返し指定でき、繰り返した分だけ詳細度が上がるので、「!important宣言」の変わりに利用できる（という邪悪なコンセプト）
- https://www.w3.org/TR/selectors-3/#specificityにも繰り返し指定してOKと書いてある
具体例
実用性
これは邪悪なコンセプトではあるのですが、以下のようなケースでは意外と実用性もあるかもしれません。
「!important宣言」よりもファイルサイズを小さくできるケース
例えば以下のような規約でCSSを書いているとして、（BEMを採用しているような想定です）
- セレクタにIDは利用しない
- 「!important宣言」は利用しない
- 詳細度は深くしない
その中でユーティリティ的なクラス名を用意する場合、詳細度はクラス名を2回指定すれば標準の指定よりも高くなるので、「!important宣言」を使うよりも短い表記にすることができます。
AMP対応で「!important宣言」を置き換えるケース
- 既存のサイトをコストを掛けずにAMP対応したい
- CSSは小さいので style[amp-custom] に入れてしまうことができそう
- 「!important宣言」が使われている
という場合、AMPでは「!important宣言」の利用は禁止なので何かしらの対応が必要になりますが、クラス名の繰り返しに置き換えることで問題を解決できるかもしれません。
複数の優先度に分けたいケース
「!important宣言」では宣言ありとなしの2つの分け方しかありませんでしたが、クラス名の繰り返しを利用した場合には以下のような分け方もできます。
- 普通 : 1回指定
- やや優先 : 2回指定
- 最優先 : 3回指定
新しい複雑さを呼び込むだけな気もしますが、うまいことルールを作ることができるのであれば、これが活きることもあるかもしれません。
SASSによる実装
sass-mixin-importantというモジュールを作りました。これを使うと以下のようにシンプルな記述でこの記事の方法を実現できます。