Apprehensions
Some people may have apprehensions to these convention, such as:
"But dashes suck"
You're free to omit it and just use regular words, but keep the rest of the ideas in place (components, elements, variants).
"But I can't think of 2 words!"
Some components will only need one word to express their purpose, such as alert
. In these cases, consider that using some suffixes will make it clearer that it's a block-level element:
.alert-box
.alert-card
.alert-block
Or for inlines:
.link-button
.link-span