BEMとMindBEMdingの命名規則の違い

BEMを元にした考え方がMindBEMdingなんですが、地味に命名規則というかModifireの使い方が違うのでメモ

比較元

BEM

Quick start / Methodology / BEM

MindBEMding

MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts

違う部分

Modifireが違う

BEM

_ で区切り

.block-name_modifier-name {...} /* Block + Modifier */
.block-name__element-name_modifier-name {...} /* Block + Element + Modifier */

MindBEMding

-- で区切り

.block-name--modifier-name {...} /* Block + Modifier */
.block-name__element-name--modifier-name {...} /* Block + Element + Modifier */

参考リンク

• BEMによるフロントエンドの設計 - 基本概念とルール | CodeGrid
• BEMの命名規則とスタイルの当て方について - Qiita
• BEM記法におけるElement/Modifierの付け方メモ - Qiita
• 今更ながらBEMについてと、それに対応するSassについてまとめてみる - Qiita