BEM
基本
Block,Element,Modifierの頭文字を取った略語
classの命名ルールが決められている
メリット等はこのサイトが詳しい
規則
CSSのclass命名規則
Block__Element--Modifier
各要素が2word以上の場合
Block-wrod__Element--Modifier
なんで__ --は2個ずつなのか
要素が2word以上になった場合は - （ハイフン1つ）でつなぐ
区別するために2つになった。アンダースコア2つはハイフン2つと統一性を持たせるため
考察
Block,Element,Modifierを区切り、& でつなげられるため、sass stylusと相性がよい
全文検索で引っかからなくなる( block__element1--modifier)等で検索不可能になる
code:style.css
.block { /* block */
width: 100%;
&__element1 { /* element */
width: 30px;
&_modifier1 { /* modifier */
}
&_modifier2 { /* modifier */
&_modifier3 { /* modifier */
}
&_modifier4 { /* modifier */
}
}
}
&__element2 { /* element */
width: 60px;
}
}
Vueを使うときにCSSの命名指針が欲しいと思ってBEMを取り入れたが、VueはScoped CSSを持っているため、
再利用性、メンテナンス性、class命名被りを防げる等のメリットをあまり感じられなかった
コンポーネント内で使うためだけにBlock,Element,Modifierを決めるのは非常に冗長に感じられたため、導入は見送った
参考