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