BEM is a component-based CSS architecture that organizes an interface into independent, reusable blocks, their elements, and modifiers. It gives component classes a consistent naming pattern that helps scope styles and prevent collisions. section 11.1.3 section 11.4
Build a BEM class name from three roles:
- Block: names the component and describes its purpose, such as share. section 11.1.3 section 11.4
- Element: names a part of the block with two underscores, such as share__menu or header__text. section 11.1.3 section 11.6.2
- Modifier: describes appearance, state, or behavior with one underscore, such as share_expanded; an element modifier follows block__element_modifier. section 11.1.3 section 11.6.2
Animated share component
Name the wrapper share, its menu share__menu, and its open state share_expanded. CSS can hide the menu by default, then reveal it with .share_expanded .share__menu when JavaScript toggles the modifier after a click. section 11.6.2
