A page module that has a certain purpose and is a wrapper for it’s children, in example a modal or a slider can be a component. Components use a name:
.component {}.component-name {}
A name can consist of different words separated by a - (dash).
A component and its containing elements which are modified in a certain way.
.component--variant {}.component-name--variant-modifier {}
A variant is divided by -- (double dash) from the main component’s name.
It may contain multiple - (dashes) to split or separate the compononents name, variants and modifiers.
Parts of which a component can consist, sometimes similar across components.
.component__link {}.component-name__link-element {}
The state of a component or nested element is modified by user interaction, for example a disabled button. A component can be modified via a separate class:
.component.is-active {}.component-name.has-children {}.component.js-selected {}
A modifier class is a verb combined with the purpose it has to describe the state of the component,
which are separated with a - (dash).