ITCSS: Scalable and Maintainable CSS Architecture - Insights - xfive

Services<br>Industries<br>Work<br>About<br>Insights<br>Contact us

xfive/<br>Insights/<br>ITCSS: Scalable and Maintainable CSS Architecture

ITCSS: Scalable and Maintainable CSS Architecture

Oct 21, 2021<br>in<br>Websites<br>Web Apps

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

Introduction<br>In 2016, we published an article on ITCSS (Inverted Triangle CSS), 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 2017Resources 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.<br>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 our ITCSS blog post is slowly decliningThis is in line with State of CSS 2020 findings, where interest in ITCSS dropped from 40% to 37% in one year.

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, but it still outperforms some of its competitors.So why a methodology with high user satisfaction isn’t more popular?<br>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.<br>Once you are familiar with the basic ideas, this article helps you gain a wider perspective on ITCSS and fill in some blanks.<br>What is ITCSS?<br>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 .<br>You can use ITCSS with preprocessors or without them and it is compatible with CSS methodologies like BEM, SMACSS or OOCSS.<br>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:

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

Such CSS organization will help you avoid Specificity Wars and will result in a healthy specificity graph.<br>Tips on using ITCSS<br>Over the years of using ITCSS at Xfive, we have collected a few tips on how to work with it.<br>Adjust ITCSS to your needs<br>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).<br>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.<br>Use BEMIT<br>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.<br>In-depth knowledge of BEM helps as well.<br>Organize layers to subfolders<br>Organize ITCSS layers into subfolders and use Sass or another preprocessor to compile newly added files.<br>@import 'settings/*';<br>@import 'tools/*';<br>@import 'generic/*';<br>@import 'elements/*';<br>@import 'vendor/*';<br>@import 'objects/*';<br>@import 'components/*';<br>@import 'utilities/*';Use one file per component<br>Store each component to its own file. Do not mix styles from different components in one file like this:<br>// Don't do this

.c-gallery {}

.c-gallery__image {}

.c-title {}‍<br>If you use modern UI libraries like React or Vue you...