CSS

Decorate your HTML with style and taste

We are using ITCSS architecture and BEM conventions to structure our CSS.

What is ITCSS (Inverted Triangle CSS)?

ITCSS is a CSS architecture especially suited for large code bases created by Harry Roberts.

It is neither a library nor a framework, but a way of thinking. Moreover, it doesn’t really depend on pre-processors such as SASS or LESS. Which means we can apply it with either pure CSS or any pre-processor you like.

A directional flow from the flat top of the inverted triangle down to the tip at the bottom symbolises an increase in specificity. This focus on less specificity makes it easier to reuse classes across a site multiple times.

Each subsection of the triangle may be considered as a separate file or group of files, although you don’t need to write code in that way. It makes more sense for Sass/Less users because of the import feature. Just think of each subsection as a methodology for splitting up and organizing reusable CSS code.

ITCSS has no hard-and-fast rules that you must follow. There is no ITCSS compliance checker, and nobody will scream at you for slightly altering this model.

Into our design system, you will find the following folders:

• settings

• mixins (part of the tools)

• functions (part of the tools)

• base (same as elements in the above schema)

• objects

• components

• utilities

What is BEM?

BEM stands for Block, Element, Modifier and is a naming styling that has been created by Yandex (think of them as Russia’s Google). The problem BEM is trying to solve is the naming problem and structure that CSS often run into. BEM also provides a better structure for your CSS code and scalable CSS.

Che the official doc to learn what's a block, an element and a modifier.

Why we are using BEM?

CSS is a language that is easy to learn but very hard to maintain. As the project grows larger, without proper structure, maintaining CSS is unbearable. People have come up with different types of solutions to this such as OOCSS, SMACSS, and BEM. Currently, BEM is the most widely used, it’s unique naming method makes CSS easy to maintain.

BEM Naming exemple:

<div class="lp-c-banner lp-c-banner--success">
  <p>Thank you for upgrading your subscription, you are now on the Business plan. We ♥ you!</p>
  <a href="#" class="lp-c-banner__close js-close">x</a>
</div>

/* Banner block
 * ================================= */

.lp-c-banner {
  background-color: gray;
}

/* Banner close element
 * ================================= */

.lp-c-banner__close {
  color: black;
}

/* Banner variant modifiers
 * ================================= */

.lp-c-banner--success {
  background-color: green;
}

.lp-c-banner--success .lp-c-banner__close {
  color: green;
}

Useful links

https://caniuse.com/ https://css-tricks.com/