CSS の可読性を高めるためのアイデア

CSS の可読性を高めるためのアイデアってのは人それぞれ色々とあるんだろうけど、最近つらつらとその辺のアーティクルを見て廻った中で特に取り入れてみようかなと思わされたのが、入れ子の状態をブロック単位でインデントして分かりやすくしておくって方法かなぁ。例えば、下記のような感じ。

/*----ラッパー----*/
#wrapper {
}
    /*----ヘッダー----*/
    #head {
    }
        /*----ナビゲーション----*/
        #nav {
        }
        #nav ul {
        }
        /*----ナビゲーション END----*/
    /*----ヘッダー END----*/
/*----ラッパー END----*/

(X)HTML だけじゃなく、CSS の方でも入れ子の状態を視覚的に分かりやすくするためにインデントさせるってのは意外と思いつかなかった。そうか、ブロック単位だけじゃなくて、ブロック内での階層をインデントしてってのもありか。

/*----ナビゲーション----*/
#nav {
}
    #nav ul {
    }
        #nav ul li {
        }
            #nav ul li a,
            #nav ul li a:visited {
            }
            #nav ul li a:hover {
            }
/*----ナビゲーション END----*/

お、カスケードされた状態が分かりやすいかも。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/71

Imaginary Affair - cssをインデントして見やすくする。 (2005年11月 1日 23:41)

Lucky bag::blog: CSS の可読性を高めるためのアイデア これは... 続きを読む

我的春秋 - 見出しの画像をサイトマップ風 CSS で管理 (2006年1月 7日 23:05)

h1 の見出し画像を、タブインデントを使ってサイトマップ風にした、独立した見出し画像管理用 CSS ファイル(h1.css)で管理する方法について紹介。 続きを読む

holidays-l - [その他]CSSセレクタを入れ子にできないのは何故? (2006年8月30日 22:53)

/*----ナビゲーション----*/ #nav { } #nav ul { } #nav ul li { } #nav ul li a, #nav u... 続きを読む

Comments