WEBサイトの運用・保守時や大規模サイトの構築時には致命的になりかねないそんなモジュールのスタイルのバッティング問題。その解決方法の1つである「BEM」に関して今回はご紹介したいと思います。 複数のページに共通して登場するデザイン(以降モジュールと呼びます)のCSSを共通CSSファイルに書いたら、ページ毎のCSSとバッティング(名前が被ること)して困った経験は無いでしょうか? WEBサイトの運用・保守時や大規模サイトの構築時には致命的になりかねないそんなモジュールのスタイルのバッティング問題。その解決方法の1つである「BEM」に関して今回はご紹介したいと思います。 具体的な例を上げて説明 モジュール作成 例えばこのようなパーツのデザインカンプがあったとします。 このデザインは複数のページに登場するため、モジュールとしてHTMLとCSSは以下のように記述したとします。 <div class=