Namespacing classes

Elements are written in CamelCase, separated by dashes.

  1. Component: .myComponent
  2. Component container: .myComponent-container
  3. Component child: .myComponent-child
  4. Component element state: .myComponent-stateDescriptionElement
  5. Component modifier: .myComponent--modifier (double dash)

Example, a contact list

  1. Component: .contactList
  2. Component container: .contactList-container
  3. Component child: .contactList-table, .contactList-item, etc.
  4. Component element state : .contactList-item-activeCursorContact, .contactList-item-activeContact, etc.
  5. Component modifier: .contactList-item--important, etc.

If there are animations (for appearing/disappearing for example), please use this convention:

  • For animation names: myComponentIn and myComponentOut
  • If you need a class to apply these changes: .myComponentIn and .myComponentOut