子孫セレクタをうまく使うことで、スタイルのためだけに ID や クラスを付与することなんかを避けることが出来るわけだけど、状況によっては深い階層の要素を指定するために子孫セレクタがとんでもなく長くなる場合がある。例えば、最近見た他人が書いたコードで一番長かった子孫セレクタなんかは、こんな感じ。
#content-body div.collapsing-block.pseudo-collapsed .collapsing-btns .toggle-collapse {
property: value;
}基本的に、セレクタ内には空白文字を挿入することが可能なんだけど、改行やインデントも空白文字のひとつに含まれる。そこで、長いセレクタに改行、インデントをうまく使うことで、視認性を高めることができるかもよってのが今回のアイデア。上記の長い子孫セレクタに改行・インデントを取り入れてみると、こんな感じ。
#content-body
div.collapsing-block.pseudo-collapsed
.collapsing-btns
.toggle-collapse {
property: value;
}キモイっちゃ、キモイ書き方だけど、階層構造も分かるし、主体となる要素（子孫セレクタの一番最後のセレクタ）も一目で分かるし、意外と視認性が高いと思ってるんだけど、意外とこんな書き方をしている人っていない。あまりにも長いと感じる子孫セレクタは、こうやって書いてみると良いかもしれないよ :)
これは去年、某雑誌にも寄稿したことがあるネタなんだけど、リハビリ代わりに書いてみた。今年はもうちょっとここを更新していきたいなあと思っている次第。
Comments
さすがに最初の例だと見にくすぎですよねｗ
ただそれだけ長いセレクタが必要になってる時点でどうかとも思ったり。
こういうセレクタがあるってことは、おそらく他のセレクタも結構長いんじゃないかと…。
効率的なコンポーネント化の手法なんかもお聞きしたいですー。
>>コバ さん
このコード、本当は同じくらい長い子孫セレクタがもう一行あってグループ化されてたんですよね（笑
子孫セレクタは、冗長的に書くかどうかってのは本当にケースバイケースですよね。
初見でコード見る人からすると、祖先から辿ると構造が頭に入りやすかったりもするし。
にしても、あまりにも長いのはさすがにアレですけどねｗ
そうそう、コンポーネント化についてはモヤモヤと考えてて、まとまったら書こうかなと思ってます。
> そうそう、コンポーネント化についてはモヤモヤと考えてて、まとまったら書こうかなと思ってます。
おっ、是非是非楽しみにしておりますー。