BEM

CSSネーミング会議BEMについて説明します.

BEMは？

ブロック、要素、およびモディファイヤ(BEM)は、CSSネーミング会議の一種であり、そのルールは簡単であり、コラボレーションの利便性を高め、CSS概略図(Specificity)から始まるセレクタの複雑さを低減する.
Block自体が有意義な要素である(独立したエンティティ自体が有意義である).
Elementとは、Blockのような機能を実行するが、Elementとは独立して意味のある要素ではない.つまり、ElementはBlockに依存する.(A part of a block that has no standalone meaning and is semantically tied to its block)
最後に、ModifierはBlockまたはElementのフラグです.Modifierは、BlockまたはElementの外観または動作を変更するために使用します.
BEMは基本的にBlock__Element--Modifer、つまりtab__item--focused(boolean)である.form__login--theme-normal(key-value)と同様に、「Modifier-value」形式も使用されます.

BEMは(HTML)ID属性を使用しません.Classのみ使用します.

どのように見えるか(x)が何の目的なのか(o)
画面に赤いエラーメッセージを表示したい場合は、赤じゃないerror名を付ける必要があります.エラーメッセージの色は、後で赤ではなく別の色に変更できるからです.

BEMのコア部分や混同の5つを以下のように整理する.

BEMをコードで表示

case 1)

// Bad case
// .header .nav와 같이 .nav가 .header에 종속된다.
<div class='header'>
  <div class='nav'> </div>  
</div>

<div class='header'> // Block
  <div class='header__nav'> </div> // Block__Element
</div>

case 2)

// Bad case
<form class='search-form'> // Block
  <div class='search-form__content'> // Block__Element1
    <input class='search-form__content__input'> // Block__Element1__Element2
    <button class='search-form__content__button'> // Block__Element1__Element3

// BEM은 구조의 깊이를 전달하지 않는다.
// DOM 구조적으론 Element2,3이 Element1 하위에 위치하지만,
// BEM 측면에선 그저 또 하나의 Block__Element다.
// Block__Element__Element와 같이 꼬아선 안 된다.
<form class='search-form'> 
  <div class='search-form__content'> // Block__Element1
    <input class='search-form__input'> // Block__Element2
    <button class='search-form__button'> // Block__Element3

case 3)

// Bad case
<figure class='photo'>
  <img>
  <figcaption>

// BEM은 클래스명을 생략해선 안 된다.
// 클래스명을 생략하면 지금 당장은 간결해 보이고 좋으나,
// 명시도가 증가해서 위험함.
// .photo figcaption < .photo__caption
<figure class='photo'>
  <img class='photo__img'>
  <figcaption class='photo__caption'>

case 4)

// Bad case
<button class='btn--submit'>

// btn에 변형이 있을 경우 --Modifier를 사용한다
// 이때 Modifier는 btn을 대체하기 위함이 아닌 확장하는 용도다.
// 따라서 btn--submit을 단독으로 사용해선 안 된다.
<button class='btn btn--submit'>

case 5)

// BEM은 kebab-case, camelCase를 허용한다
<div class='some-thesis some-thesis--fast-read'> // Block, Block--Modifier
<div class='someThesis someThesis--fastRead'>

BEMをTOYアイテムに適用する様子ゲームブロック内には様々な要素からなるものが見られる.<i>ラベルもgame iconのような構造を使うべきかどうか分かりません.

References

CSSの学習方法理論編(feat.figma)
[CSSメソッド]BEMメソッド
BEM
例のBEMとして理解される。
なぜCSSの歴史が理解しにくいのか。
MDN-CSS概略図（特殊）