ホームページの構築作業に関わっていると、「もっとCSSを効率的に書きたい」と感じたことが一度はあるのではないでしょうか。 CSSが1996年に誕生してから20年以上経ち、サポート等は充実してきたものの書き方については特段簡素化されてはいません。 その中で「もっと効率的にCSSを書きたい」という要望を拾って具体化されていったのがBEM(ベム)と呼ばれる概念です。 CSSを効率的に書くことは、時間の短縮になるだけでなく、保守運用の面でもメンテナンスしやすくなります。 今回は、CSSを機能的にマークアップする概念「BEM」について、基本的な考え方や具体的なコーディング方法を解説します。 BEMが生まれるまで Built on Pablo 比較的小規模のサイトであれば、体系的にCSSを書く必要はあまりないかもしれません。 小規模サイトの場合は簡単なCSSを早速書いてみたり、SASSのようなプリプロ
BEMとはBEMの概要もうすでにいろんなブログやQiitaなどで書かれていると思いますが、自分の頭を整理するためにも書いておきます。BEMはロシアの検索エンジン大手のYandexにより以下を達成するために開発された「cssの記述方法論」です。CSSセレクタの「命名規則」とも言われています。 Block, Element, ModifierBEMは、セレクタの役割を「Block」「Element」「Modifier」の3つの概念に分けて考えるCSSの設計思想です。BEMのドキュメントによると、Block、Element、Modifierは、それぞれ以下のように定義されています。 Block「Block」は独立したエンティティ（実体）であり、アプリケーションを「構成するパーツ」です。Blockは単一で用いることも可能だし、他のBlockを含んで複合的に用いることも可能です。Block名は基本的
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
