cssの見た目を整える

こんにちは、坂井です。

cssのコーディングをしていると、要素名・ID名・クラス名がごちゃごちゃになって訳が分からなくなってしまいます。
こんな感じです。

/* フッター用 */
.footer{
・・・
}
.footer_top {
・・・
}
.footer_con {
・・・
}
.menu_footer {
・・・
}
.menu_footer ul {
・・・
}
.menu_footer li {
・・・
}
li#sitemap {
・・・
}
.copyright{
・・・
}

「フッター用」というコメントがあるし、「footer」って単語もそれなりにあるのでそれなりに見やすいです。
が、下にある「li#sitemap」「.copyright」だけをみて、それがフッターの中にあるものとは分かりにくいです。
この調子で追加修正していくと・・・
このタグのクラスは何だったっけ・・・と、HTMLのコードを何回も見直してしまうことになります。
さらに悪いと、他のクラス名と名前がブッキングして原因不明の崩れ方をしてしまう可能性があります。



こうしたらどうでしょうか

/* フッター用 */
.footer{
・・・
}
.footer_top {
・・・
}
.footer_con {
・・・
}
.footer_con .menu_footer {
・・・
}
.footer_con .menu_footer ul {
・・・
}
.footer_con .menu_footer li {
・・・
}
.footer li#sitemap {
・・・
}
.footer .copyright{
・・・
}

書き出しが「.footer・・・」となるように、分かりにくくそうなクラス名に文脈セレクタとして「.footer」や「.footer_con」を追加しました。
こうすれば、いくらコードが増えても今見ている所がフッターであることがすぐに分かります。
さらに「.footer」の子孫要素の「li#sitemap」という指定の仕方のため、他の場所の「li#sitemap」に影響が及びません。

色々とメリットがあるので、適度に文脈セレクタを使いましょう