BEMでグローバルなモディファイア

BEMを使ったクラス命名規則で「パーマリンク」といったようなグローバルな(ルートかそれより上位の)モディファイアを表現するの難しい気がする。もちろんbody要素というブロックに対してのモディファイアで良いのだけど、実際にそれを利用するのはもっと下位のコンテキストなので、CSSの子孫セレクタで表現しなければならなくなる。

.article__title {
}

.body--permalink .article__title {
}

書きにくい。そしてBEMの、ブロックが相互に依存しない利点と矛盾する。

.article__title {
}

.article__title--permalink {
}

グローバルなモディファイアをやめるとスッキリする。けれどこのコンテキストのモディファイアじゃないので気持ち悪い。

.article {
  .title {

    .permalink & {
    }
  }
}

ここのCSSでは、Sassでネストでエレメント・&を使うとモディファイアというルールにしているのでこれで良い。BEMとSassに対する広範な知識を持つことを前提にすれば良い着地点な気がするけど、コンセンサスは取れなそうで実用的でじゃない。

結論なし追記した。

少し前にパーマリンクだけタイトルを大きく目立つようにした絡みでこんなことを考えていた。太字じゃない方が良い気もするのと、太字の文だけ余白を調節した方が良さそうとかちょっと気になるところがまだある。本当は.HiraKakuInterface-W2や游ゴシック Lightを使った細字でのタイトルにしようかと考えていたんだけど、細字のない環境での違和感がものすごいので諦めた。

.article__title {
}

.article__title--in-permalink {
}