Writing CSS

CSS architecture

Smart's CSS architecture uses a combination of the BEM naming convention and the Inverted Triangle CSS architecture in order to have a maintainable, readable and scalable code structure.

BEM

BEM stands for Block Element Modifier and it categorizes the code into three groups:

  • Blocks which are a standalone entities that are meaningful on their own, for example .c-menu.
  • Elements which are part of a block and have no standalone meaning and are semantically tied to a block, for example c-menu__item.
  • Modifiers which are variants or flags on a block or element and are used to change the appearance or behavior, for example c-menu--disabled.

The BEM naming convention helps to see how classes are related to each other.

For more information about BEM, please refer to this excellent article by Harry Roberts.

Namespacing and ITCSS

Smart's CSS architecture uses namespacing. This means that every class in the codebase is prefixed with a certain string to explain what the code does and to avoid style leakage.

The namespaces are also used to separate the code base into different layers and this is where ITCSS comes into place.

The different layers that you find within the ITCSS architecture are, in the following order:

  • Settings,which are used with preprocessors and contain font, colors variables.
  • Tools, which is a layer used for mixins and functions.
  • In the generic layer you can find ground-zero styles like resets, normalize styles and box-sizing.
  • Base Elements which styles bare, unclassed HTML elements to redefine the default styling from browsers.
  • Objects, which is a layer used for undecorated design patterns, it is prefixed with o-.
  • Components, which is used to style specific UI components, here you will find the majority of the code and classes within this layer are prefixed with c-.
  • Utilities, which are helper and override styles and namespaced with u-.

The codebase is structured in this order so that it is ordered from generic to explicit styles, low-specificity to more specificity (ID selectors are avoided as much as possible) and far reaching to local styles, which makes the framework scalable and maintainable.

For more information on ITCSS, please refer to this slideshow.