Extensible CSS Idealistic Structure Theory

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.

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.

--

--

Web Developer, Designer in Japan. https://github.com/morishitter

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store