CMSで見出しへの自動装飾とclassによる手動装飾を共存させる

CMSベースのサイトコーディングをしたことがない人に説明するのが難しいのですが…

システムで更新するサイトを作成する際には、自由入力を可能としている箇所にh1〜h6を使用したとき、それぞれに適切な装飾が反映されている必要があります。

単純に考えるとこうですが、もちろんこれでは本文以外のコンポーネントの装飾をリセットするのが大変です。

h1 {
  /* h1の装飾 */
}
h2 {
  /* h2の装飾 */
}

なので、自由文の範囲を任意のクラスを付与したdivで囲み、それを条件に装飾するのが一般的です。

.richtext h1 {
  /* h1の装飾 */
}
.richtext h2 {
  /* h2の装飾 */
}

装飾用クラスとの重複

ところが、実際の運用現場ではこう単純に行くわけがなく「マークアップはh3なんだけど、見た目はh1っぽくしたい」「マークアップはpなんだけど、見た目はh4っぽくしたい」というケースが必ず出てきます。

これを想定しておかないと納品後の手戻りが確実なので、私は制作時点から「.title-01」といったクラス指定にも対応して予防線を張っています。

しかし、以下の対応はNGです。

.title-01,
.richtext h1 {
  /* h1の装飾 */
}
.title-02,
.richtext h2 {
  /* h2の装飾 */
}

「.title-01」は先述の「div.richtext」内でも使用される可能性があるので、このように書くと「.richtext h1」の方が優先されてしまいます。

結論

いろいろ考えた結果、私は以下のようにしています。

headdings_without_richtext.css

.title-01,
.richtext h1:not([class*="title"]) {
  /* h1の装飾 */
}
.title-02,
.richtext h2:not([class*="title"]) {
  /* h2の装飾 */
}

タイトル装飾用のクラス名に必ず一意の接頭辞をつけるようにしたうえで、:not擬似セレクタで「クラスにその接頭辞が指定されている見出し」を除外します。

こうすれば、自由文内であっても、クラスを付与すればその装飾が反映され、クラスを付与していなければデフォルトの装飾が反映されることになります。