BEM記法

BEM（Block-Element-Modifier）

プロジェクト適用した際の設計

ブロックのみ

special-block

ブロック+ 要素

special-block__label

ブロック+ 要素+修飾

special-block__label--main

special-block__label--sub

ブロック+修飾

special-bock--main

概要

単語を連結する場合は「-」一つで連結

ブロックは必須

要素を連結する場合、「__」アンダーバー２つ

修飾を連結する場合、「--」ハイフン２つ

ブロック、要素、修飾同士は連結しない

大文字は使用しない

Reactの場合

ブロック名は基本Component名に倣う

--------------

参考

CSS Architecture with ReactJS

Block: Independent logically and functionally components.

Element: A part of a block that has no standalone meaning.

Modifier: Define the behavior and the appearance of a block or element.

命名規則を統一し、予測できるようにする

code:bem.css

/* The name of the block, which is also the namespace of its elements and modifiers.*/

.block

/* The block namespace followed by a double underscore and the element name. */

.block__element

/* The block or element namespace followed by a double hyphen and the modifier name. */

.block--modifier, .block__element--modifier