BEMによるフロントエンドの設計 | 第1回 基本概念とルール

BEMによるフロントエンドの設計 第1回 基本概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基本となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような

[wordi]

BEMの基本概念とルール

[hi-hats]

フロントも設計指針大事ということで

[vanbraam]

via b:id:entry:286167863;"BEMとは、Block、Element、Modifierの略語"

[igrep]

わかりやすい。CSS組み込みでサポートしてほしいなぁ。

[mabots]

bem

[sdfg158]

“なぜBEMが必要なのか私たちはHTMLとCSSを使うことでしか、Webサイトを作ることができませんが、HTMLとCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のようなトラブルに遭遇す

[snowlong]

css

[koheisg]

こっちは相当綺麗にまとめられてるな。

[kiyo_hiko]

Block-Element-Modifier。Blockは要素に依存しない、Elementは単一Block内で有効である、Block入れ子でスタイリング厳禁、Elementが単一Blockで完結できるからBlock__Elementという命名が厳密に成り立てる。キャメルもよい

[kamip]

へー

[labocho]

smaccs みたいなやつ

[akiueos]

_φ(･_･

[d_animal141]

BEMによるフロントエンドの設計 - 基本概念とルール