Skip to content

Instantly share code, notes, and snippets.

@kyaido
Created May 22, 2014
Embed
What would you like to do?
クラスと画像の命名規則(仮)

クラスについて

クラスの命名規則

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

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

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

クラス名のつけ方

  • 省略しすぎない
    • 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment