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----*/お、カスケードされた状態が分かりやすいかも。
Comments