BEM記法とは
BEM記法とは、CSSのクラス設計手法の一つで、「Block・Element・Modifier」の頭文字を取ったものです。主に、スタイルの再利用性や保守性を高めることを目的として使われます。CSSが大規模になると、「どのスタイルがどこに影響しているのか分からない」「クラス名が曖昧で管理できない」といった問題が起きやすくなります。BEM記法は、そういった問題を構造的に解決するためのルールです。BEMの基本構造BEMは以下の3つの要素で構成されます。Block（ブロック）独立したコンポーネントの単位です。それ単体で意味を持つパーツを指します。例：header、card、button などElement（エレメント）Blockの中にある構成要素です。単体では意味を持たず、必ずBlockに属します。「Block名__Element名」という形で表現します。例：card__titlecard__imagecard__textModifier（モディファイア）BlockやElementの見た目や状態の違いを表します。「Block名--Modifier名」または「Element名--Modifier名」という形で表現します。例：button--primarybutton--largecard__title--highlightなぜBEM記法が重要なのかBEM記法の本質は「クラス名を見れば構造が分かる」ことにあります。例えば、「card__title--large」というクラスを見ただけで、・cardというコンポーネントの中の・titleという要素で・largeという状態であるということが一瞬
0
