NOTE I now use the conventions detailed in the SUIT framework
Used to provide structural templates.
Pattern
t-template-name
t-template-name--modifier-name
t-template-name__subcomponent-name--subcomponent-modifier-name
Examples
t-icon
t-icon--large
t-btn
t-btn--large
t-media
t-media__img
t-media__img--large
t-media__opt
t-media__body
Used to indicate the state of a component
Pattern
is-state-type
Examples
is-hidden
is-collapsed
is-expanded
is-selected
Used to provide JS-only hooks for a component. Can be used to provide a JS-enhanced UI or to abstract other JS behaviours.
Pattern
js-action-name
Examples
js-submit
js-action-save
js-ui-collapsible
js-ui-dropdown
js-ui-dropdown--control
js-ui-dropdown--menu
js-ui-carousel
Could reuse the Template Component naming convention, for example:
specific-name
specific-name--modifier-name
specific-name__subcomponent-name
specific-name__subcomponent-name--subcomponent-modifier-name
Or just let anything go.
rafaelrinaldi
The item naming would then fall like this if you needed to modify the menu item
.menu__item--list {}
You could call the modifier what you wanted but it makes sense to keep the modifier name the same as the parent modifier. Then you can couple the new menu item modifier with the parent modifier.