クラスと画像の命名規則（仮）

naming.md

クラスについて

クラスの命名規則

文法上のクラス名のルール

• 大文字と小文字は区別される
  • 例）header, Header, HEADER
• 半角の英数字、ハイフン（ - ）、アンダーバー・アンダースコア（ _ ）のみ使用できる
  • NG例）header!!!!, header⑩
• アルファベットで始めなければならない（数字や記号で始めてはならない）
  • NG例）1st-header, ----header

プロジェクトでのクラス名のルール

• 単語の区切り方
  • 例）header-title, header_title, headerTitle
• キャメルケース（ローワーキャメルケース）
  • 例）header, headerTitle, headerTitleNoBorder
  • 参考）http://ja.wikipedia.org/wiki/%E3%82%AD%E3%83%A3%E3%83%A1%E3%83%AB%E3%82%B1%E3%83%BC%E3%82%B9
• なぜ命名規則が必要か
  • 他の作業者が困る
  • 3ヶ月後の自分も困る
  • 名前を考えるのに時間をかけないようにする

クラス名のつけ方

• 省略しすぎない
  • NG例）headerTitleNoBorder → hTtlNB
  • 考え方は色々あるが、自分は長くてもよいと思う、クラス名が長いということはそれだけ情報が詰まっているということなので
• 視覚情報でクラス名をつけない
  • NG例）red, leftImage
• そのものの意味で名前をつける
  • good例）error, thumbnail
• でもテキストを赤くするクラスもあると便利…
  • そういう場合用に、意味を表さない汎用クラスを用意しておく（仕方なく！）
  • 例）red, left, bold

クラスのつけ方

• クラス名の重複を避ける
• サイトの規模によって使いわける
• 汎用的なクラスとモジュールのクラス

参考

クラス名に使える文字種について
https://w3g.jp/xhtml/dic/class#toc1

スタイルシート［CSS］/CSSの基本/クラス名を使った指定 - TAG index Webサイト
http://www.tagindex.com/stylesheet/basic/format2.html

「CSS」コーディングの際のclass名、id名で悩んだ時に参考にしたい記事
http://matome.naver.jp/odai/2133510305809813901

CSSや画像の命名規則について
http://kojika17.com/2012/02/naming.html

新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]
http://html-coding.co.jp/annex/column/11/

googleスタイルガイド
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml#ID_and_Class_Name_Delimiters

メンテナブルCSS | 株式会社サイバーエージェント
http://www.cyberagent.co.jp/recruit/techreport/report/id=7926