BEM
Block Element Modifier
block__element--modifier
Blocks, Elements, Modifiers
Block
単独で意味のある独立したエンティティ
親要素
例:header, container, menu, checkbox, input
list
Element
独立した意味を持たず、意味的にその Block に結び付けられている Block の一部。
子要素
例:menu item, list item, checkbox caption, header title
list__item
Block__Element: 親子関係があることを表している
Modifier
ブロックまたは要素上のフラグ。 外観や動作を変更するために使用する。
例:disabled, highlighted, checked, fixed, size big, color yellow
button--state-success
Element--Modifier: 対等な関係であることを表している
1Blockで1ファイル作成する
menu.scss
参考
Web制作者のためのCSS設計の教科書