CSSのidやclassの名前の決め方はどうしてますか？ 何か参考しているものなどありま...

CSSのidやclassの名前の決め方はどうしてますか？

何か参考しているものなどありませんか？

ID・CLASSに使用できるのは半角英数字とハイフン、アンダースコア(_)。大文字と小文字の区別ありです。



ハイフンやアンダースコアを使うのもいいですが、容量を減らすためにも大文字と小文字で工夫するほうがいいと思います。



super-mario

super_mario



ではなく



superMario



のように。



- - - - - - - - - - - - - - - - - - - -



基本的には次のような英単語でIDをつけてます。



基本情報…header

補足情報…footer

内容…content

説明…description

要約…summary

メニュー…category

案内…navigation

要素…section



しかしこれだけでは足りないとき、それぞれの前に修飾語句をつけます。



ページの基本情報…pageHeader

内容の基本情報…contentHeader



メインの内容…mainContent

サブの内容…subContent

特集の内容…featuredContent



サイトの説明…siteDescription

ページの説明…pageDrescription



上部階層の案内…globalNavigation

同一階層の案内…localNavigation

補助ページの案内…utilityNavigation



1つ目の要素…firstSection

2つ目の要素…secondSection

3つ目の要素…thirdSection



また容量（字数）を削減するために適度に文字数を減らします。例えば

globalNavigation…gNavi

localNavigation…lNavi

utilityNavigation…uNavi

firstSection…section1

secondSection…section2

thirdSection…section3



- - - - - - - - - - - - - - - - - - - -



このほかに必要に応じて次のようなCLASSをつけるときもあります。

（最初・最後だけ枠をなくしたり、奇数と偶数で別の背景色を指定して縞模様にしたりなど）



firstChild…最初の子要素

lastChild…最後の子要素



odd…奇数の子要素

even…偶数の子要素



- - - - - - - - - - - - - - - - - - - -



これでほとんどの場合、悩むことはないです。

私は単に、英語に翻訳して使ってます。