投稿数 585
公開から 2940 日

BEM入門「Introduction」を読む


Introduction

todo

Methodologies

todo

Why BEM over the others?

todo

Blocks, Elements and Modifiers

まずは概念についての説明。 実際の命名規則についてはネーミングのページを見てください。

Block

単独で意味のあるスタンドアロンエンティティ

Element

独立した意味を持たず、意味的にそのブロックに結び付けられているブロックの一部。

Modifier

ロックまたは要素上のフラグ。外観や動作を変更するためにそれらを使用してください。

Under the hood

実際にやってみた

Benefits

Modularity(モジュラリティ=独立性)

ブロックスタイルはページ上の他の要素に依存しないため、カスケードによる問題は発生しません。

また、完成したプロジェクトから新しいブロックにブロックを転送することもできます。

※カスケードとは? CSS(Cascading Style Sheets)のカスケード。 カスケードの意味は連鎖的。 連鎖的に小要素にプロパティが適用される利点に大規模になればなるほど保守性を下げる原因となるのはなんとなく想像がつくだろう。 ここではそのことを言っている。

Reusability (再生利用)

独立したブロックをさまざまな方法で構成し、それらをインテリジェントに再利用することで、管理しなければならないCSSコードの量を減らすことができます。

一連のスタイルガイドラインが整っていれば、ブロックのライブラリを構築してCSSを非常に効果的にすることができます。

Structure(構造的)

BEM方法論はあなたのCSSコードにシンプルで理解しやすいまま堅固な構造を与えます。

参考

http://getbem.com/introduction/