-
Notifications
You must be signed in to change notification settings - Fork 0
CSS Architecture
Keith Daulton edited this page Feb 7, 2018
·
12 revisions
Styles and patterns are layered and loaded by scope, specificity and extensibility.
I prefer BEM-style naming, but with some added syntax.
BEM uses this convention: .block__element--modifier
- Blocks represent the outer boundary of a pattern.
- Elements represent children of blocks.
- Modifiers represent variants to blocks and elements.
One spin I like to add to this is the state class. The purpose being to distinguish state from design variants.
States represent stateful changes to blocks or elements with the convention: .is--state
Namespaces are also added which will prefix class names for more clarity.
The full convention being: .namespace-block__element--modifier.is-state