Namespacing classes
Elements are written in CamelCase, separated by dashes.
- Component:
.myComponent
- Component container:
.myComponent-container
- Component child:
.myComponent-child
- Component element state:
.myComponent-stateDescriptionElement
- Component modifier:
.myComponent--modifier
(double dash)
Example, a contact list
- Component:
.contactList
- Component container:
.contactList-container
- Component child:
.contactList-table
,.contactList-item
, etc. - Component element state :
.contactList-item-activeCursorContact
,.contactList-item-activeContact
, etc. - Component modifier:
.contactList-item--important
, etc.
If there are animations (for appearing/disappearing for example), please use this convention:
- For animation names:
myComponentIn
andmyComponentOut
- If you need a class to apply these changes:
.myComponentIn
and.myComponentOut