BEM とは

html のクラスやIDの命名規則の１つです。
コードが扱いやすくなります。

この記事では、MindBEMdingを少し変えたものを紹介します。
(相違点：Element の前のアンダースコアが1つだけです。)
haml で表記します。

書き方

クラス・IDを次のように名づけます。

block_element--modifier

区分名が２語以上の場合はハイフン1つ - でつなげます。

.side-btn

BEM では、ページの構成要素を、block、element、modifier に分けます。

必然的に、または機能的に独立した区分のことです。
block の中に block を入れてもOKです。

.header .card  #sidebar  %table  %ul

.sidebar
  %ul

それ以上細分化できない区分のことです。
block の中にあります。
element の前にはアンダースコア _ をつけます。（タグはそのままです。）

.header_tab .card_title .sidebar_submit  %td %li

特定の block、elementを修飾するクラス、IDのことです。
modifier の接尾語の前にハイフン2個 -- をつけます。

.header_tab--gray .card--gray

・タグの下に element を付けるとき
・タグに modifier を付けるとき
は、.gray のように名づけるか、タグの上にクラスを設けて、.table--gray のようにします。

%table.gray

.table
  %table.table--gray

BEM 公式サイト > Key concepts
https://en.bem.info/methodology/key-concepts/#block