majiayu000 Phoenix Design System — BEM Naming
Pattern
block → disclosure, tabs, slider
block__element → slider__label, dialog__title, search-field__icon
block--modifier → theme--dark, dropdown--picker
Rules
- Block: A standalone component —
disclosure,search-field,toggle-button - Element: A part that cannot exist independently — uses
__separator —slider__label,field__icon - Modifier: A variant or state — uses
--separator —theme--dark,dropdown--picker - Compound names within a segment use hyphens:
search-field,toggle-button,dialog__close-button - No prefix — never add any prefix to class names
Examples
className="search-field"
className="search-field__clear"
className="disclosure__panel"
className="theme--dark"