Our CSS naming convention doesn't follow the standard BEM convention because we found it to heavy. Instead we've create the following set of rules.
Each of the following categories should be written in camelCase
The meaning of the object, describing what it is.
<div class="card"></div><div class="toDo"></div>
Should help us understand what is the type of the element.
It could be :
<div class="toDo-container"><ul class="toDo-list"><li class="toDo-item"><h4 class="toDo-title"></h4><p class="toDo-description"></p></li></ul></div>
Same as the type, but describe the action of our element.
<div class="button-container"><button class="button-delete"></button><button class="button-save"></button></div>
Flags on elements. Use them to change appearance, behavior or state.
it could be :
<div class="button-container"><button class="button-delete hidden"></button><button class="button-save disable"></button></div>
No css should be applies to it.
An example could be : listening for an
removing it from the dom,
<!-- An angular example --><div class="card-container" [class.haveBackFace]="true">