12周年記念パーティ開催! 2024/5/10(金) 19:00

BEMによるフロントエンドの設計

全4回

フロントエンドの設計手法のひとつ「BEM」の基本的な概念を押さえます。BEMコード設計を活かすと、HTML、CSS、JavaScriptをどのように書くことができるか見てみましょう。

最終回 実装のポイント 後編

BEM toolsを使用ぜす作成したJavaScriptのサンプルコードを例に、BEMの概念に沿ったJavaScriptの実装を考えます。ピクセルグリッドプログラマー数人が議論した現時点での考えに基づいています。

第3回 実装のポイント 中編

この記事では、「BEM」の言葉が意味するものを再考し、「開発基盤としてのBEM」を活かしたJavaScriptの設計の可能性について考察します。

第2回 実装のポイント 前編

今回と次回の2回でBEMの主旨に沿ったCSSやJavaScriptの実装は、どのようにすればよいか、そのポイントを解説します。

第1回 基本概念とルール

この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。