Class naming

We should always create a class for every component we will be using. Avoid using selectors such as > i or similar. The naming scheme we will use will allow us to target every element via a class without nesting.

We will be using the (BEM, Block Element Modifier, naming scheme)[http://getbem.com/introduction/].

It basically goes like this:

<form class="form form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>

1.- We create a Block level element, in this case, the form. Block level elements can live inside one another and interact with each other, but they encapsulate a standalone entity that is meaningful on its own.

A block level element is named using kebab case only.

.form | .modular-thing | .checkbox-group | .megamenu

2.- We create Elements inside the Block level element. This elements have no meaning without the Block level element. For instance, a title, a thumbnail of a product, the slider in a price filter, etc.

A regular element is named using kebab case as well, but must prefix the block level element they belong to, separated by __.

.form__input-container | .modular-thing__modular-subthing | .checkbox-group__checkbox | .megamenu__item

3.- (Optional) We create modifiers. They're meant to change appearance, behavior or state. They're kebab case, suffixed to the Element, and separated by --.

.form__input-container--dark | .modular-thing__modular-subthing--different-state | .checkbox-group__checkbox--disabled | .megamenu__item--has-children