個別記事

前後の記事

長い子孫セレクタをインデントする

この記事が属するカテゴリー
CSS

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

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

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

2008-01-10T01:47:52+09:00 | コメント (3) | トラックバック (0) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/413

"長い子孫セレクタをインデントする"へのトラックバックはまだありません。

コメント

コバ さんからのコメント

さすがに最初の例だと見にくすぎですよねｗ

ただそれだけ長いセレクタが必要になってる時点でどうかとも思ったり。
こういうセレクタがあるってことは、おそらく他のセレクタも結構長いんじゃないかと…。

効率的なコンポーネント化の手法なんかもお聞きしたいですー。

2008年01月10日 11:20
e-luck さんからのコメント [TypeKey Profile Page]

>>コバ さん
このコード、本当は同じくらい長い子孫セレクタがもう一行あってグループ化されてたんですよね（笑

子孫セレクタは、冗長的に書くかどうかってのは本当にケースバイケースですよね。
初見でコード見る人からすると、祖先から辿ると構造が頭に入りやすかったりもするし。
にしても、あまりにも長いのはさすがにアレですけどねｗ

そうそう、コンポーネント化についてはモヤモヤと考えてて、まとまったら書こうかなと思ってます。

2008年01月10日 13:07
コバ さんからのコメント

> そうそう、コンポーネント化についてはモヤモヤと考えてて、まとまったら書こうかなと思ってます。

おっ、是非是非楽しみにしておりますー。

2008年01月15日 14:14

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)