Naming classes in CSS can be hard, fortunately BEM helps us to define a convention to adhere to.
https://github.com/getchopchop/chopchop/wiki/Best-Practices#bem
Having a mix of singular/plural can cause confusion between team members so just keep it singular!
- card
- flag
- header
- footer
- domino
- btn/button
- accordion
- tab
- pocket
- panel
- drawer
- modal
- overlay
- title
- field-group
- logo
- qty/quantity
- swatch
- volume
- slider
- carousel
- tag
- badge
- sorter
- select
- toolbar
- stamp
- tray
- shelf
- slab
- media-unit
- header
- body
- footer
- aside
- main
- sub
- dialog
- action
- image
- media
- striped
- labelled
- rounded
- bordered
- condensed
- stacked
- primary
- disabled
- success
- error
- inline
- pills
- space
- is-
- has-
- align-left
- align-right
- align-center
- visually-hidden
- hidden
- separator
- box
- inner
- outer