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.

Naming

Each of the following categories should be written in camelCase

Element

The meaning of the object, describing what it is.

<div class="card"></div>
<div class="toDo"></div>

Type

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>
</li>
</ul>
</div>

Action

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>

Modifier

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>
</div>

JavaScript

Ids

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, ...

Classes

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

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