これでもうCSSのクラス名は迷わない!BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet

Webページやスマホアプリでよく使用されるUIコンポーネントを実装する時に、CSSのクラス名をBEMでつける時の命名規則をまとめたチートシートを紹介します。

サイトのキャプチャ

BEM Naming Cheat Sheet

チートシートは3部構成です。

  • Standard Blocks
  • Form Blocks
  • Layou blocks

メモ書きがある項目は、翻訳してみました。

BEMのチートシート

Breadcrumb

aria-labelには「Breadcrumb Navigation」のようなものは使用しないようにしましょう。スクリーンリーダーが「Navigation」を2回アナウンスしてしまいます。

BEMのチートシート

Button

これはボタンというより、リンクです。フォームにリンクではないボタンがある場合は、代わりに<button>要素を使用する必要があります。
また、ほとんどの場合、button__body要素は必要ありません。

BEMのチートシート

Card

BEMのチートシート

List

1ページに複数の異なるリストを実装する場合は、ハイフンで区切られた名前をつけて対応します。counter-list, article-list, customer-listなど。

BEMのチートシート

Navigtion

BEMのチートシート

Tab

これはtab-listのためのアクセシブルな実装です。aria属性は有効にするとJavaScriptで挿入されるので、追加する必要はありません。
参考: WCAG ARIA accessible tab navigation

BEMのチートシート

Checkbox

この例ではラベルが外側のノードになっているので、どこをクリックしてもチェックボックスを切り替えることができます。ただし、label要素のclass名がcheckboxになっていて、span要素のclass名にlabelが含まれているので、名前の付け方が少し奇妙です。

BEMのチートシート

Custom Checkbox

これはカスタムチェックボックスです。アクセシビリティを向上させるために、実際の入力はアイコンの上に配置されています。構造をより理解するために、Codepenをご覧ください。

BEMのチートシート

Input Group

input要素の異なる状態が必要な場合は、.input-group--errorのようにinput-groupに修飾子を加える方法があります。こうすることで、すべての子要素の異なる状態のスタイルに対応できます。または、変更が必要な要素に修飾子を加えます(input-group__help--error)。
参考: CodePen

BEMのチートシート

Imposter

Imposterは、子要素が中央に配置されたコンテナです。コンテナはビューポートいっぱい(height: 100vh; width: 100vw)に広がっています。

BEMのチートシート

Sidebar

サイドバーブロックはサイドバーが最初で、コンテンツが2番目で、2つの子要素を含むことを想定しています。

BEMのチートシート

Stack

レイアウトコンポーネントは、あらゆるタイプの子要素をネストできる必要があります。子要素を配置し、必要応じてギャップを加えます。子要素を認識しやすくするために、l-stackのようなプレフィックスを使用できます。

sponsors

top of page

©2020 coliss