CSSでID・classのネーミング

CSSレイアウトを行う際、基本サイズの設計のほか、あらかじめネーミングルールを設定するのが良さそうです。

やってしまいがちなのがid=”left”やclass=”column01″などの「装飾そのままネーミング」。
この場合、左に置いていたメニューが仕様変更で右になった場合やカラム数が変更になった場合に非常に混乱する原因になるので極力避けたほうが良いです。

ローマ字ネーミング id=”contents_hidari”、class=”midashi01″なども、間違いではないですが極力避けましょう。
簡単な英語も使えないように見られてしまうと、自社ブランドのクオリティを低下する要因にもなります。

ID・classのネーミングとしては、大枠に対してずばり的確か、極力曖昧にしておくのが良いでしょう。

ネーミングで、よく使う感じのものを列挙します。

全体ネーミング（id/class）

• container
• wrapper

header・タイトル周り（id/class）

• header
• header_out
• header_in
• title
• title_side
• lead
• seotext

ヘッダ下イメージ画像（id/class）

• visual
• keyvisual
• image

メインコンテンツ関連（id/class）

• content
• contents
• contents_out
• contents_in
• main
• body_in
• base
• box
• in

ナビゲーション関連（id/class）

• nav
• navi
• navigation
• menu
• topmenu
• topnavi
• sidebar
• gnav
• gnavi
• global-navi
• global-nav
• sidenavi
• side-navi

フッター関連（id/class）

• footer
• footer_out
• footer_in
• copyright
• copy
• end

ネーミングに関しては何が正解とか言うのは一切ありませんが、今後の更新やカスタマイズを考慮したネーミングにしておくのが望ましいです。

たとえば、左メニューで構成していたサイトが突然右メニューの仕様でマイナーリニューアルする際、id=”left”のネーミングの場合はhtml側でのid/classまで書き換えするケースが発生してしまいます。

もちろん、id=”left”のままでも正しくサイトは構築できますが、非常に解かり難く今後の整合性に影響を及ぼす可能性があります。