Lucky bag::blog: 2008年01月アーカイブ

月別アーカイブ 2008年01月

前後の月

子孫セレクタをうまく使うことで、スタイルのためだけに 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;
}

キモイっちゃ、キモイ書き方だけど、階層構造も分かるし、主体となる要素（子孫セレクタの一番最後のセレクタ）も一目で分かるし、意外と視認性が高いと思ってるんだけど、意外とこんな書き方をしている人っていない。あまりにも長いと感じる子孫セレクタは、こうやって書いてみると良いかもしれないよ :)

これは去年、某雑誌にも寄稿したことがあるネタなんだけど、リハビリ代わりに書いてみた。今年はもうちょっとここを更新していきたいなあと思っている次第。