Get in touch

Let us know your requirements and we'll get back to you as soon as possible.
Drop files here or click to upload

We care about your privacy and automatically agree to the following NDA. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Submit

Thank you, !

Thank you very much for submitting your inquiry to Xfive! We'll be in touch with you soon.
Ingrid Getzan Van Cafe
Their designs are exceptional and their communication is great. They also do things in a timely manner, which is amazing.
Home Blog ITCSS: Scalable and Maintainable CSS Architecture

ITCSS: Scalable and Maintainable CSS Architecture

How do I make my CSS scalable and maintainable? It’s a concern for every front-end developer. ITCSS has an answer.

Introduction

In 2016, we published an article on ITCSS, where we shared our experience with its implementation into our own development workflow. Back then ITCSS, created by Harry Roberts, was a new CSS methodology.

Harry Roberts leading a performance workshop in the Xfive office in 2017

Harry Roberts leading a performance workshop in the Xfive office in 2017

Resources on ITCSS were rare so our post got to the first position in Google and has stayed there till today. This allows us to share some first-hand data about people’s interest in it.

Over the years, the blog post has accumulated 290k page views. It still gets about 1500 page views a month, but there is a clear declining trend visible.

Number of pageviews of the Xfive's ITCSS blog post from 2016 to 2021

Number of pageviews of our ITCSS blog post is slowly declining

This is in line with State of CSS 2020 findings, where interest in ITCSS dropped from 40% to 37% in one year.

Interest in ITCSS between 2019 and 2020

If we look at Satisfaction vs. Usage diagram from the same resource, we will find ITCSS in the low usage / high satisfaction quadrant.

ITCSS satisfaction ranking declined from 84% to 78% between 2019 and 2020

ITCSS satisfaction ranking declined from 84% to 78% between 2019 and 2020, but it still outperforms some of its competitors.

So why a methodology with high user satisfaction isn’t more popular?

ITCSS remains partially proprietary and there isn’t any open source documentation available. While this prevents ITCSS wider adoption, we respect Harry’s intellectual property. The best way to learn ITCSS is his Skillshare class.

Once you are familiar with the basic ideas, this article helps you gain a wider perspective on ITCSS and fill in some blanks.

What is ITCSS?

ITCSS stands for Inverted Triangle CSS. It helps you organize your project CSS files in such a way that you can better deal with CSS specifics like global namespace, cascade and selectors specificity.

You can use ITCSS with preprocessors or without them and it is compatible with CSS methodologies like BEM, SMACSS or OOCSS.

The main idea of ITCSS is that it separates your CSS codebase into several sections (called layers), which can be represented as sections of an inverted triangle:

ITCSS Layers

Those layers are:

  • Settings – used with preprocessors and contain font, colors definitions, etc.
  • Tools – globally used mixins and functions. It’s important not to output any CSS in the first 2 layers.
  • Generic – reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.
  • Elements – styling for bare HTML elements (like H1, A, etc.). These come with default styling from the browser so we can redefine them here.
  • Objects – class-based selectors which define undecorated design patterns, for example the media object known from OOCSS
  • Components – specific UI components. This is where most of our work takes place. We often compose UI components of Objects and Components
  • Utilities – utilities and helper classes with ability to override anything which goes before in the triangle, e.g. hide helper class

The triangle also shows how styles appear in the resulting CSS: from generic styles to explicit ones, from low-specificity selectors to more specific ones and from far-reaching to localized ones.

ITCSS Key Metrics

Such CSS organization will help you avoid Specificity Wars and will result in a healthy specificity graph.

Tips on using ITCSS

Over the years of using ITCSS at Xfive, we have collected a few tips on how to work with it.

Adjust ITCSS to your needs

ITCSS is flexible in terms of your workflow and tools. Are you concerned about the amount of boilerplate involved? This is up to you. ITCSS doesn’t prescribe that you need to have all layers present (only in what order they should be if they are present).

In a minimal setup, you can have just components with default elements styling coming from the browser. Of course, this is not very practical. Almost everyone uses some settings, reset and/or normalize CSS for good reasons.

Use BEMIT

Use the BEMIT naming convention, especially its Namespaces (.c-user, .o-media, etc.). This will allow you to focus on solving front-end challenges rather than thinking up style names and their location.

In-depth knowledge of BEM helps as well.

Organize layers to subfolders

Organize ITCSS layers into subfolders and use Sass or another preprocessor to compile newly added files.

@import 'settings/*';
@import 'tools/*';
@import 'generic/*';
@import 'elements/*';
@import 'vendor/*';
@import 'objects/*';
@import 'components/*';
@import 'utilities/*';

Use one file per component

Store each component to its own file. Do not mix styles from different components in one file like this:

// Don't do this

.c-gallery {

}

.c-gallery__image {
}

.c-title {

}

If you use modern UI libraries like React or Vue you can keep all component related files in one folder:

MyComponent/MyComponent.tsx
MyComponent/my-component.scss

Limit nesting

Limit nesting to 2 levels. Many developers think that using the parent selector (&) is a requirement just because they use Sass. There’s nothing wrong with flat structure with full selectors expanded, either. Often it’s easier to scan and search the code.

.c-teaser {
   padding: 2em;
}

.c-teaser--small {
  padding: 1em;
}

.c-teaser__title {
  font-size: 2em;
}

Use the style you prefer, but avoid deep nesting, which results in overqualified selectors. Those are against the spirit of ITCSS.

Do not overuse objects (or omit them completely)

Objects are the most confusing part of ITCSS. In theory, they make perfect sense, but things can get out of control easily. Check out this example from our own website built a few years ago:

<section class="o-section o-section--more-v-spacing o-section--dark 
o-section--above-sidebar c-banner c-banner--dark js-section-above-sidebar">

The premise of ITCSS is that it’s easy to track down where particular styles come from and how they affect the styling of elements on the page. This can be difficult to do if the style of a component comes from two or more sources, like an object and a component. But often it’s hard to draw clear boundaries between various CSS properties and whether they belong to an object or a component.

There are a few things you can do to avoid this:

  • Omit objects from ITCSS completely and only use components
  • Nest objects and components in HTML to avoid placing too many classes on one HTML element
  • Separate your spacing system from your objects and components, as we’ll discuss in the next point

Separate spacing system from components

In the words of Max Stoiber, “Margin breaks component encapsulation. A well-built component should not affect anything outside itself.”

A reusable component can appear in different contexts where its distance from other elements may differ. If we try to deal with all the different contexts by adding margins to the component itself, we usually end up with many modifier classes.

One way to solve this in ITCSS is to use wrapper or spacer objects or components. Another, even more flexible solution, would be to create utility classes for margins and spacing, similar to what Tailwind does.

Don’t worry about styles repetition

If there is any concern with a component based CSS architecture like ITCSS, it might be style repetition. Components encapsulate styles and allow us to avoid CSS conflicts and overrides, but they can also lead to style repetition.

Don’t worry about style repetition too much and don’t abstract too many styles into objects. It is much easier to update a particular style that is repeated in a few independent components than it is to track down a chain of styles abstracted into multiple objects or components. If you do this too often, utility-first systems might be more suitable for your way of thinking.

Conclusion

At Xfive, we’ve been using ITCSS for the past 5 years. It’s great for those types of projects which don’t come with built-in support for scoping CSS, for example WordPress projects. ITCSS is part of our custom WordPress development framework Chisel.

However, often it’s our go-to approach even on projects where scoping of CSS is more common, for example React projects.

You simply cannot go wrong with ITCSS. It’s the result of the experience and many years of work by Harry Roberts, one of the most respected CSS authors out there. If you don’t mind digging into the resources a bit, you will learn a simple but powerful architecture that will allow you to create scalable and maintainable CSS for your smaller or bigger projects.

Resources

Version history

  • Feb 2016 - the first version of this article
  • Nov 2021 - updated version of the article

About the author

Lubos Kmetko

Lubos Kmetko LinkedIn

Lubos Kmetko started to work for Xfive as a front-end developer in 2006. He currently helps with business operations and writes for the Xfive blog.

More from Lubos
More from Lubos

Comments (24)

Write a comment

Nico

Great roundup -- thanks for sharing!

As you mention, there are many objects that need to be included in the vast majority of your projects. Do you actually use the InuitCSS framework, or some alternative? I've been wondering if it's still getting attention ...

Feb 18, 2016

Lubos Kmetko

Thanks, Nico!

We don't use InuitCSS. ITCSS was a new concept to us and we didn't want to make it too complex for the beginning. But certainly InuitCSS is a great inspiration.

Feb 18, 2016

Hien Dao

Useful article, thanks for sharing!

Do you think we should locate the css files into folders instead of using naming prefix?
For example:
- settings/global.scss
- settings/colors.scss
- tools/mixins.scss
...
I think it will make the structure more clean, not too much css files in a folder.

Jul 14, 2016

Lubos Kmetko

Thanks, Hien.

Yes, I don't see any problem with that, although Harry recommends flat structure. With folders you can use gulp-css-globbing and don't have to worry about importing every new file. I've used it here https://github.com/xfiveco/chisel-sample/tree/master/src/styles (that's just a work-in-progress demo of our new generator supporting ITCSS)

Jul 14, 2016

Martin

Great article and for sharing the other articles related to ITCSS.

I'm starting to use (and understand) the ITCSS concept, applying the cssguidelin.es also from Harry Roberts, and adding Bourbon with Neat to build a solid foundation for a project we are working on.

Now that you're using ITCSS for a while, did the rest of your team were able to follow along? Did they found easy to add new components?

Cheers!

Jul 21, 2016

Lubos Kmetko

Thanks, Martin, and good luck with ITCSS!

At the time, there were 3 of us working on the front-end of xfive.co, all new to ITCSS, but I didn't notice any major problems in following ITCSS. Slight disadvantage is lack of authoritative documentation so maybe it's worth to have have one team member who has more in-depth knowledge and can do basic setup and guide others if necessary.

Jul 21, 2016

Mgpeng

Great article ! Thank you very much, I am using ITCSS in my project right now.

Aug 10, 2016

Lubos Kmetko

Thanks, Mgpeng! And good luck with your project :)

Aug 10, 2016

Billy Halim

I have something to tell about ITCSS of the layer order. It is about specificity. Going down the triangle, there will be more specificity in components, elements, and objects. At the tip of the triangle, there are trumps or helper classes. Let me give you example :

Element
table > tr > th{
border: 1px solid red;
}

Helper class
.border-blue{
border: 1px solid blue;
}

If we write , the won't have blue border because of specificity. Because of that, is it the principle of ITCSS to use Objects to solve this problem ?

Instead of writing table > tr > th, we can directly create a class named .table-header to avoid specificity.

Is it good ?

Thanks in advance.

Sep 09, 2016

Lubos Kmetko

Hi, Billy, according ITCSS you can use !important in the trumps layer but I would be careful about using too many helper classes with the !important rule.

As you suggested it would be better to create a custom class based component for a custom table design. Also I would avoid using selectors like table > tr > th in the elements layer. If you want to override default browser styling for th, you can define it directly on the th element which will make applying styles from the components easier.

Sep 16, 2016

Jitendra Vyas

What methodology you would choose today? Would you go for CSS Module?

Oct 20, 2016

Lubos Kmetko

Hi Jitendra, we are still using ITCSS in our projects, in fact we now have a Yeoman generator which supports ITCSS - https://github.com/xfiveco/generator-chisel

I think CSS Modules like approach is most suitable in situations when you can have your other component related code (HTML, JS) at the same place too (for example like in Vue.js apps)

Oct 21, 2016

Steve tomlin

I've adopted a similar approach during my tenure of 16 years of front end development. I have never given it a name. Experience has taught me the more layers the more complex and complexity should be avoided if possible, but the general steps outlined with a reset, common elements, re-usable objects and components keeps the code organised and dry where it can be. So i support about 80% of the reasoning behind 'itcss'. I'm not sold on oocss yet because i have spent a lot of my time doing dom manipulation to create new dynamic behaviour which is easier to do on single classes than several. It depends on the project.

Nov 28, 2016

gavin

In what layer would you put helper classes?

Lets say I have a header component wit use javascript to stick it to the top once scrolled. I add .sticky class to it.... where would be the best place to place such classes

Nov 30, 2016

Lubos Kmetko

@steve nice to see you've been using similar approach for many years, I'd say it's not surprising as ITCSS is a simple, common sense approach.

@gavin such classes should go into trumps or utilities layer (originally it was called trumps but if you check inuitcss framework, it's been renamed to utilities). Then you can call the class .u-sticky or you can use stateful class .is-sticky. ITCSS doesn't mention where to put stateful classes but the utilities layer seems to be the right place (unless you introduce a new layer called states). For more info on namespaces check http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/

Dec 01, 2016

Bill

Why don't you put Tools first and Settings second? Can you explain the benefit of having Settings first when Tools can work completely independent of Settings whereas sometimes settings will rely on Tools. Am I missing something?

Dec 12, 2016

Lubos Kmetko

@bill the original ITCSS article says "The Tools layer comes after the Settings layer because a mixin may require one of the global settings as a default parameter." However, I think that if this is not your case, you can switch their order if that suits your needs better. The beauty of ITCSS is its simplicity and flexibility with just a few simple rules to follow.

Dec 13, 2016

Thomas Goemaere

Where do third party dependencies like fancybox, photoswipe, slick, ... fit into the ITCSS architecture?

Dec 28, 2016

Andrew

I am just afraid, that in a long run, all CSS will end up in the "Trumps".

Jan 02, 2017

Lubos Kmetko

@thomas we usually install and import those from npm modules but if you download and uses files directly, you can put them into a separate layer called 'vendor'

@andrew that's possible if ITCSS isn't used properly. To avoid this I would try to use independent components as much as possible.

Jan 09, 2017

Kittender

I always loved ITCSS since I knew about it. But I also felt it was missing some things in the pyramid which are always present on the standard project :
- zones / pages specific styles
- css frameworks and libs imports

That's why I had fun doing a little twist to address those lacking folders in the architecture : https://github.com/kittender/teatree

Feb 01, 2018

Burton Smith

Thank you for the great article! I am a huge fan of the ITCSS pattern/principles and have used it in many of my projects. There is no doubt that projects should be adopting a front-end architecture to endure scalability and maintainability.

One of the downsides I have run into with using ITCSS is the naming conventions. It can get confusing for developers and designers when using overloaded terms like "objects", "generics", and "settings".

I recently developed a conceptually similar framework with some terms that may be more palatable for my designers and developers. I also built some tooling around it for scaffolding and maintenance: https://projectclarion.com/

Jul 14, 2018

Nigel King

Surely this is just common sense by another name?
Since I first saw CSS processors back in ~ 2008, projects have been split in, a similar if not exact same structure.
How have you been doing it all these years?

Aug 10, 2018

David

"ITCSS can be used with preprocessors or without them and is compatible with CSS methodologies like BEM, SMACSS or OOCSS."

Please can you clarify how you see ITCSS being compatible with SMACSS? I was imagining it as an alternative since ostensibly they appear to be organizational frameworks. But maybe I'm misunderstanding something?

Sep 27, 2018

Would you like to add something?

All fields are required. Your email address will not be published.

Submit

Related blog posts