BEMを使ったHTML共通パーツ（メモ）

Block

ページ全体（ container ）

<div class="container"></div>

共通パーツ（cmn-xxx）

<!-- 共通ヘッダー html4（上） or html5（下） -->
<div class="cmn-header"></div>
<header class="cmn-header"></header>

<!-- 共通フッター html4（上） or html5（下） -->
<div class="cmn-footer"></div>
<footer class="cmn-footer"></footer>

<!-- 共通ナビゲーション html4（上） or html5（下） -->
<div class="cmn-nav"></div>
<nav class="cmn-nav"></nav>

Element

見出し（ _headline ）

<h1 class="xxx_headline">見出し１</h1>
<h2 class="xxx_headline">見出し２</h2>
<h3 class="xxx_headline">見出し３</h3>
<h4 class="xxx_headline">見出し４</h4>
<h5 class="xxx_headline">見出し５</h5>
<h6 class="xxx_headline">見出し６</h6>

一覧（ _list, _item ）

<ul class="xxx_list">
    <li class="xxx_item"></li>
    <li class="xxx_item"></li>
    <li class="xxx_item"></li>
    ...
</ul>

コンテンツ要素（ content_xxx ）

<!-- コンテンツヘッダー html4（上） or html5（下） -->
<div class="content_header"></div>
<header class="content_header"></header>

<!-- コンテンツフッター html4（上） or html5（下） -->
<div class="content_footer"></div>
<footer class="content_footer"></footer>

Modifier

要素の状態を表す場合（ -state ）

<!-- カーソルが乗っている状態 -->
<a href="#" class="xxx xxx-hover"></a>

<!-- アクティブ状態 -->
<a href="#" class="xxx xxx-active"></a>

<!-- フォーカスされた場合 -->
<a href="#" class="xxx xxx-focus"></a>

コンテンツによって色を変えたい場合（ -color ）

<!-- 赤の場合 -->
<div class="xxx-red"></div>

<!-- 青の場合 -->
<div class="xxx-blue"></div>

<!-- 緑の場合 -->
<div class="xxx-green"></div>