CSSの3大設計手法をまとめてみた - Qiita

それぞれの特徴 では、どんな設計手法なのかをまとめていきたいと思います。 BEM いきなりCSS設計手法の王道である BEM（ベム）さんの登場です。 最も好き嫌いが別れる設計手法であり、最も有名な設計手法ではないでしょうか。 他社のサイトをブラウザの開発者モードで覗くムッツリスケベの皆さんなら、よく見る命名かもしれません。 BEM という名前は Block、Element、Modifier の３つの要素を示しています。 この設計手法は命名規則が大きな特徴となります。 3大設計手法の中で、最も細かくクラス名を指定する設計手法です。 よって、スタイルの使い回しが少なく、修正時の影響範囲が小さいため、メンテナンスコストを下げることが出来ます。 ただし、これによってクラス名やファイルの記述量が長くなってしまうというデメリットもあります。 命名規則 BEMはクラスの所属関係を明確に宣言します。 前述