Extensible CSS Idealistic Structure Theory

Today, we are at our wits’ end writing scalable CSS on large Web applications. There are many methods for CSS architectures, e.g. OOCSS, SMACSS, ITCSS and so on.

In this article, I propose the best of CSS architecture, named “ECSSIST (Extensible CSS Idealistic Structure Theory, pronouced as ‘EXIST’)”.

Elements of ECSSIST

ECSSIST is composed of 5 styling layers. These are named as “Settings”, “Base”, “Patterns”, “Components” and “Pages”.

Settings Layer

The settings layer includes global variables and configurations, e.g. color palettes, typography variations, size of thumbnails. The styles in this layer are defined by CSS Custom Properties or Variables of CSS preprocessors.

:root {
  --red: #e23B00;
  --blue: #3f526b;
  --black: #000;
  --background: #faf8f5;
}

Base Layer

The base layer is for the base styles. Reset or normalize CSS in this layer. Link styles go here too.

Patterns Layer

The patterns layer is an abstract layer which has styles of the design pattern. For example, media object is the representative of this layer. And I often create button pattern here. Styles in this layer do not have properties for decorations.

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  ...
}
.button:hover {
  ...
}
.button:focus {
  ...
}

Components Layer

Styles in this layer are things that the user clicks or touches directly. Component layer styles include decoration properties and rules for the state, but do not include rules for layouting. It does not depend on the positions in the page of your project, so you can reuse it in different pages.

I named selectors in this layer using the BEM(MindBEMding) naming convention, and rules for the state of the component are named with an `is-*` prefix.

I usually create a component style guide (if you don’t know about style guides, take a look at the articles in styleguides.io). By creating a style guide, we can consider the reusability of designs, better communicate with designers, quickly check changes without builds and easily cross-brower test.

Pages Layer

Finally, layout components go in this layer. Pages are shown in screens of any size. All of pages are composed of the combination of these components.

Utility Classes?

Utility classes should not be necessary if the person writing the CSS understands the reason or meaning of the design being used. In other words, if you find yourself wanting to make utility classes, you might not be understanding the design.

ECSSIST is inspired by ITCSS in its architecture and strategies of writing styles, and also inspired by Atomic Design in its design processes.