CSS命名規範

1.BEM規範

BEMとは何か

BEMとは「Bがブロック（block）で、Eが要素（element）で、Mが修飾子（modifier）です」という三つの元素を使用してCSS名に名乗る命名規範です。

上記の元素の間に、次の三つの記号（半角スペースの状態で）を使って相互の関係を表します。

「 - 」：ブロックまたはサブ要素の複数単語間の接続記号を表して、ハイフンとしてのみ使用される中線

「 __ 」：ブロックとブロックの子要素を接続するための二重アンダースコア

「 _ 」：ブロックまたはブロックのサブ要素の状態を記述するために使用される単一アンダースコア

BEMを使用例の対比

ブロック（block）

「Block」について、常規の書き方と BEMの書き方は同じで、違いがありません。

/* 常規の書き方と BEMの書き方は同じ */
.list

要素（element）

次の例です、liがulの子要素として、クラス名の差別が生まれるようになります。常規の命名は要素の間の関係を表しませんが、 BEMの命名は「 __ 」を使って要素間の関係を表現します。

「__ 」の前には親の名で、後ろには子の名です。

/* 常規の書き方 */ 
  <ul class="list">
    <li class="item">Pricing</li>
    <li class="item">Contact</li>
  </ul>
  
/* BEMの書き方 */   
   <ul class="list">
    <li class="list__item">Pricing</li>
    <li class="list__item">Contact</li>
  </ul>

/* 常規の書き方 */
.list{} 
.list.item{} 

/* BEMの書き方 */
.list{} 
.list__item{}

修飾子（modifier）

修飾子は要素の特別な状態と言われます。簡単に理解すれば、「活性化」と「非活性化」状態の差別です。

/* 常規の書き方 */ 
  <ul class="list">
    <li class="item active">Pricing</li>
    <li class="item">Contact</li>
  </ul>
  
/* BEMの書き方 */   
   <ul class="list">
    <li class="list__item list__item-active">Pricing</li>
    <li class="list__item">Contact</li>
  </ul>

/* 常規の書き方 */
.list{} 
.list.item{} 
.list.item.active{} 

/* BEMの書き方 */
.list{} 
.list__item{}
.list__item_active{}

BEMのメリット

BEMの命名規範を使ったら、特殊的な困りを免れ、継ぐ問題を解決し、「英字化」命名の悩みから抜け出すというメリットがあります

2.CSS命名の原則

長の命名より短の命名が良い

長い命名と比べて、短い命名にはクラス名を書く時間を短縮し、CSSファイルサイズを減らすことができます。だから、短の命名がおすすめです。

//  おすすめ
.some-intro{...}

// おすすめではない
.some-introduction{...}

単の命名より組合せの命名が良い

簡単の命名には重複の可能性が高くなります。それより、組合せの命名を取った方がいいです。

// おすすめではない
.header{...}

//　おすすめ
.cs-header{...}

属性向きの命名と語義向きの命名

属性向きの命名とは、セレクターの命名はプロジェクトやページやモジュールなどと関係がなくて、具体的なCSSスタイルに従って取られるということです。例えば：

.clearfix:after { 
	content : ''; 
	display: table; 
	clear: both; 
}

属性向きの命名には以下のメリットとデメリットがあります。

• メリット：クラス名を通じて当スタイルの作用がすぐわかるので、HTMLとCSSの間に切り替える時間が省かれ、高い効率があリます。一方、CSSの重用率が高く、パフォーマンスが最も良いです。
• デメリット：属性が単一であるため、適用のシーンが少ないです。そのほか、使いすぎて、メンテナンスコストが高いという場合があります。

語義向きの命名とは対応された要素があるコンテクストによって取られるということです。たとでば、ナビゲーションのクラスに命名するなら、「nav」と名付けますし、メニューのクラスに命名するなら、「menu」と名付けます。

.nav { background-color: #333; color: #fff; }
.menu {font-size: 0; color : transparent;}

語義向きの命名には以下のメリットとデメリットがあります。

• メリット：適用のシーンが多くて、拡張性が便利で、すごく精緻なレアウト効果が実現できます。
• デメリット：命名のせいで、A要素のクラス名をできるだけ、B要素に適用しない方がいいです。B要素がA要素の部分のスタイルを使うなら、B要素の語義を持つクラス名を声明して、改めてCSSスタイルを定義するのみです。重用率が低くて、スタイルの再利用ができないデメリットがあります。

3.おすすめのCSS命名

ステータス

前の       prev
次の       next
当の       current

表示       show
非表示      hide
オープン    open
オフ        close

選ばれた     selected
アクティブ    active
デフォルト    default
切り替え      toggle

無効      disabled
危険      danger
主要      primary
成功      success
ヒント     info
アラート    warning
エラー      error

大型    lg
小型    sm
超小型  xs

レイアウト

ドキュメント    doc
ヘッダ    header(hd)
ボディ    body    
フッター    footer(ft)    
メイン    main
サイド    side    
コンテナ    box/container

共通の部件

リスト    list
リストアイテム  item
テーブル    table
フォーム    form
リンク    link
タイトル    caption/heading/title
メニュー    menu
グループ    group
バー      bar
コンテント    content
結果    result

コンポーネント

ボタン        button(btn)
アイコン        icon
ドロップダウン    dropdown
ツールバー      toolbar
ページ        page
サムネイル      thumbnail
アラート      alert
プロセス     progress
ナビバー      navbar
ナビ        nav
サブナビ      subnav
パンクズ      breadcrumb(crumb)
レベル        label
バッジ        badge
マスク        jumbotron
パネル        panel
ウェル        well
タブ      tab
ツールチップ      tooltip
ポップオーバー      popover
メリーゴーランド      carousel
クラッシュ      collapse
ポジションフィックス    affix

語義化の部件

ブランド        brand
フラグ        logo
追加の部品    addon
著作権        copyright
レジストリ        regist(reg)
ログイン        login
検索        search
ホット        hot
ヘルプ        help
情報        info
ティップ        tips
切り替え        toggle
新聞        news
広告        advertise(ad)
ランク        top
ダウンロード        download

機能部件

左のフロート    fl
右のフロート    fr
クリア    clear