CSS naming convention

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 : container, header, content, footer, list, item, title, description, ...

<div class="toDo-container">
<ul class="toDo-list">
<li class="toDo-item">
<h4 class="toDo-title"></h4>
<p class="toDo-description"></p>


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>


Flags on elements. Use them to change appearance, behavior or state.

it could be : active, disable, hidden, ...

<div class="button-container">
<button class="button-delete hidden"></button>
<button class="button-save disable"></button>



Ids should only be used if intended to be changed with javascript code.
No css should be applies to it.
An example could be : listening for an event listener, removing it from the dom, ...


If javascript is manipulating a class, this one should be written in camelCase

<!-- An angular example -->
<div class="card-container" [class.haveBackFace]="true">