CSS Naming convention

Note: This CSS naming convention doesn't follow the standard BEM convention because we found it too heavy. Instead we've create the following set of rules.

Element

The meaning of the object, describing what it is.

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

Type

Should help us to understand what type the element is.
Example: 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 describes 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, behaviour or state.
Example: 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 applied to it.
• Example : listening for an event listener, removing it from the dom, ...

Classes

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

<div class="card-container" [class.haveBackFace]="true">