[CSSメソッド]BEMメソッド

1262 ワード
CSS BEM テキストリンク
CSSメソッド論BEMの内容として,BEMは「CSSクラス名の命名方法」についての内容である.

BEMの基本構造


BEMはBlock、Element、Modifierを表し、それぞれ和--で区切られている.
例を通して知ると.
/* Block */
.btn {}

/* Element that depends upon the block */
.btn__price {}

/* Modifier that cahnges the style of the block */
.btn--orange {}

Block


blockは機能とは独立したページコンポーネントで、簡単に繰り返し使用できます.
たとえば、1ページ目で使用しているブロックを取り外し、2ページ目で使用可能な場合はブロックと見なします.

Element


elementはブロックを構成する単位であり、特定のブロックにのみ意味のあるelementである.

Modifier


modifierはblockまたはelementのプロパティを担当します.たとえば、特定のブロックまたは要素のサイズまたは色を変更する場合に使用できます.

BEMのメリット


1)クラス名のみで寸法構造がわかります。


2)SASSの親参照先(&)との併用が非常に便利です。


3）SASSへの重複使用を減らすことができる。


BEMの欠点


1)クラス名が長すぎる可能性があります。


注)https://nykim.work/15
注)https://blog.illunex.com/bem
start suspend resume stop
CSS | Semantic Web, Tags