あなたの 3 番目の例は、単純なセレクタを descendant combinator で連結するもので、これは child combinator のよりファジーで遅いバージョンのようなものです。 IE6 をサポートしていない場合は、むしろ子コンビネーターを使用すべきです。

たとえば、#twitter p#twitter>p です。 まず、ブラウザはすべての p 要素を集め、一段上の階層に行き、この要素が “twitter” というIDを持っているかどうかをチェックする。 もしそうでなければ、ブラウザはここで停止します(child combinatorを使用した場合)。 子コンビネーターを使った場合は、ルートノードまで一気に移動します(途中で#twitterが見つからなければ)。

Descendant Combinator のより大きな問題は、そのファジー性で、衝突の可能性を増大させます。 副次的な効果として、任意にネスト可能な構造を作成することは、よりトリッキーになります。 #twitter.container の内部にない場合、#twitter 内の p 要素が異なって見えることを本当に望んでいますか。

別の問題は、.container は位置であり構造の一部ではない、ということです。 つまり、そうです…そのルールは再利用できません。

Scalable CSS = 再利用可能なコード = クラスです。 ID ベースのルールは、定義により、再利用可能ではありません。

Leave a comment

メールアドレスが公開されることはありません。