CSS idやclassによる場合分けの考え方

Question

wordpress上でdiv等のhtmlタグをcssファイルに分けて装飾している場合の話です。

wordpress上のプラグインから出力される結果に対してのCSS装飾なのでプラグインのphpファイルを弄ってしまうとアップデートの際に手間が増えてしまうためプラグインのphpは触らない事とします。
※但し、新規にphpを作成しテンプレート用のphpにincludeさせる事は可能です。

<div id="hoge-1">...</div>
<div id="hoge-2">...</div>
|
<div id="hoge-1234">...</div>

上記の様にidが[hoge]-[数字]のフォーマットになっているhtmlがあり、cssファイルでそれを数字の部分を判定する事によってdisplay: none;としたいです。
通常cssにはphpの変数等を使用する事が出来ないため困っております。ggってみたところ CSS内でPHPの変数を使いたい のようにすれば一応求めている事は出来そうです。

div#hoge-<?php $id ?> {
display: none;
}

ですが、本来このような方法は想定されてなさそうに感じるので使うべきでないように思います。
このようにhtmlのidの可変部分によって場合分けする方法は、上記の例以外に何かあるのでしょうか？

ご教授願います。

Answer 1

CSS ファイルを PHP で動的に出力することは特にやってはいけないことではないと思います。

ただ、JavaScript を使ってもいいケースであれば、JavaScript で該当 div を display: none; するのが普通かな、と思いました。

もし、html を

<div id="hoge-1" class="off">...</div>
<div id="hoge-2">...</div>
|
<div id="hoge-1234" class="off">...</div>

のように出し分けられるケースであれば、id ごとに表示をコントロールするのではなく、

div.off {
  display: none;
}

とすればいいと思います。

Comments

[kyapiy]

回答ありがとうございます。
そうなのですね。てっきりcssはcssを記述すために存在しているのできっちりと切り分けて、書いた方が良いと思っていました。

確かに、こういった動的に見た目を変更する場合にはjsが適当だとどこかで見た記憶があります。

htmlタグの構造はプラグインから自動出力されるので変更出来ないです。
現状jsを弄るスキルが無いので当面は参考urlの用にphpで出し分けする事にします。

[unau]

PHP などを使って動的にクライアント（ブラウザ）に返すコンテンツとしては、通常は html ファイルが多いわけですが、CSS・JavaScript・画像ファイルなど、なんでも構いません。
動的なコンテンツに対する静的なコンテンツのメリットは、サーバ側の負荷分散で専用のサーバをあてがうことができたり、というのもありますが、サーバサイドからクライアントサイドまでのいたるところ（たとえばプロキシなど）でキャッシュが効く、というのが大きいと思います。
CSS を動的に出力することが少ないのは、html + CSS (+ JavaScript) の構成上、CSS ファイル自体は固定にするのが CSS の設計思想にもあうからです。つまり、今回のケースのように div#hoge-xxx で細かくスタイルをつけていくのは、文書としての構造・意味 (html) と表示上の特性（CSS) の分離ができているとは言い難い面があるわけです。通常は、先に挙げましたように html では class を指定して、div ごとに「文書としての意味」を与え、CSS ではそういう意味があるときにはどう表示する、ということだけを書くわけです。そういう書き方を徹底していれば、自然と CSS は動的に出力する必要がなくなってきます。
今回のケースは、html をいじりにくいという点、JavaScript を導入しにくいという点、を考慮すると、動的に CSS を出力するのもありかな、と思います。