Building a Maintainable and Scalable CSS Codebase with ITCSS


Prerequisites

Specificity is a key idea throughout this post, and it’s a topic in itself. If you don’t fully understand it, I would recommend going over it. Nonetheless, let’s look at a quick example to showcase specificity in action.

h1 {
  color: red;
}
#wrapper h1 {
  color: orange;
}
div h1 {
  color: pink;
}

In this example there are three points at which we are defining the heading’s color. The one that is computed is down to the specificity of each definition. In this case, the heading’s color would be orange. This is because the selector has the highest specificity; notice the specificity overrides the cascade.

When it comes to specificity there are a lot of variables that need to be considered; it can quickly become a nightmare. So today, we’ll be looking at managing it with ITCSS.

What is ITCSS?

ITCSS is a CSS architecture, it stands for Inverted Triangle CSS and it was created by Harry Roberts from CSS Wizardry. It allows you to properly take advantage of the key features of CSS without the mess.

If you look at a lot of CSS code in production you will see that the specificity of styles is erratic; it varies all throughout the stylesheet with no clear direction. This doesn’t couple well with the cascading characteristic of CSS, and it often forces you to override styles. This is bad CSS. ITCSS encourages you to write CSS in specificity order, visually this creates an inverted triangle.

Key Concepts

  1. Write CSS in specificity order.
  1. Make sure new rulesets are additive, rather than overriding previous rulesets.
  1. Order stylesheets following the inverted triangle, starting with general rules (wide-reach / low-specificity), and working toward more specialized rules (low-reach / high-specificity).

The Structure of ITCSS

ITCSS employs a set of directories to group certain levels of specificity and function. It gives you a well-structured codebase and allows us to easily control the load order in our main.scss file.

Settings is where we add our variables and typography, etc. This includes any variables your styles might rely on.

Tools is where we add our mixins and functions. These first two layers are for preprocessors and shouldn’t output any CSS.

Generic is where you can put resets, normalisers, and global rules.

Elements is where we style bare HTML elements, no classes or ids.

Objects is where we put our objects – this can be used for object-oriented CSS.

Components is where most of your code will be. It’s where we put our UI components, things like navigation and buttons.

Trumps is for your utilities, your highest specificity styles.

The structure looks something like this:

-- main.scss

-- settings
---- _typography.scss
---- _palette.scss

-- tools
---- _box-model.scss
---- _position.scss

-- generic
---- _normalize.scss
---- _box-sizing.scss

-- elements
---- _body.scss
---- _a.scss

-- objects
---- _media.scss

-- components
---- _button.scss
---- _loading.scss

-- trumps
---- _clear-fix.scss

And your main.scss file would look like this:

@import 'settings/_typography.scss';
@import 'settings/_palette.scss';

@import 'tools/_box-model.scss';
@import 'tools/_position.scss';

@import 'generic/_normalize.scss';
@import 'generic/_box-sizing.scss';

@import 'elements/_body.scss';
@import 'elements/_a.scss';

@import 'objects/_media.scss';

@import 'components/_button.scss';
@import 'components/_loading.scss';

@import 'trumps/_clear-fix.scss';

Before we go any further, I want to make one thing clear: ITCSS is a guideline, not a rulebook. Feel free to modify it as you wish. I personally don’t write a lot of object-oriented CSS so you won’t often see the objects directory in my projects. Make it work for you.

What Are the Benefits of ITCSS?

ITCSS allows you to take advantage of inheritance, instead of battling against it by overwriting styles. This reduces the amount of CSS you need to write and maintain, and saves some time on page load.

ITCSS breeds efficient CSS that’s clear and concise. When it comes to scaling, it’s simple: You’re adding more code but not more complexity. This creates a well structured and easily maintainable CSS codebase, something that is extremely valuable when working on a project of any size.

Take Away

The key idea to focus on is maintaining a global stylesheet that has a clear direction in specificity. This comes with a whole plethora of benefits and is the sole idea ITCSS is built upon.

ITCSS couples seamlessly with naming conventions like BEM. To learn about BEM, check out my previous post, Writing Reusable and Modular CSS with BEM.

If you follow these principles, you’ll be left with a maintainable CSS codebase that scales organically.

Let's stay connected. Join our monthly newsletter to receive updates on events, training, and helpful articles from our team.