これでもうCSSのクラス名は迷わない！BEMの命名規則をまとめたチートシート -BEM Naming Cheat Sheet
Post on:2020年4月17日
sponsors
Webページやスマホアプリでよく使用されるUIコンポーネントを実装する時に、CSSのクラス名をBEMでつける時の命名規則をまとめたチートシートを紹介します。
チートシートは3部構成です。
- Standard Blocks
- Form Blocks
- Layou blocks
メモ書きがある項目は、翻訳してみました。
aria-labelには「Breadcrumb Navigation」のようなものは使用しないようにしましょう。スクリーンリーダーが「Navigation」を2回アナウンスしてしまいます。
これはボタンというより、リンクです。フォームにリンクではないボタンがある場合は、代わりに<button>要素を使用する必要があります。
また、ほとんどの場合、button__body要素は必要ありません。
1ページに複数の異なるリストを実装する場合は、ハイフンで区切られた名前をつけて対応します。counter-list, article-list, customer-listなど。
これはtab-listのためのアクセシブルな実装です。aria属性は有効にするとJavaScriptで挿入されるので、追加する必要はありません。
参考: WCAG ARIA accessible tab navigation
この例ではラベルが外側のノードになっているので、どこをクリックしてもチェックボックスを切り替えることができます。ただし、label要素のclass名がcheckboxになっていて、span要素のclass名にlabelが含まれているので、名前の付け方が少し奇妙です。
これはカスタムチェックボックスです。アクセシビリティを向上させるために、実際の入力はアイコンの上に配置されています。構造をより理解するために、Codepenをご覧ください。
input要素の異なる状態が必要な場合は、.input-group--errorのようにinput-groupに修飾子を加える方法があります。こうすることで、すべての子要素の異なる状態のスタイルに対応できます。または、変更が必要な要素に修飾子を加えます（input-group__help--error）。
参考: CodePen
Imposterは、子要素が中央に配置されたコンテナです。コンテナはビューポートいっぱい（height: 100vh; width: 100vw）に広がっています。
サイドバーブロックはサイドバーが最初で、コンテンツが2番目で、2つの子要素を含むことを想定しています。
レイアウトコンポーネントは、あらゆるタイプの子要素をネストできる必要があります。子要素を配置し、必要応じてギャップを加えます。子要素を認識しやすくするために、l-stackのようなプレフィックスを使用できます。
sponsors
