Understanding ITCSS: Real case using ITCSS — https://carloscaballero.io

CSS is a painful when not written properly and sadly the majority of times CSS is incorrectly organized. The main problems when you use CSS are the following ones:

  1. Global scope. All rules in CSS are in the same scope, so that you can overwrite rules when you use different style sheets.
  2. Cascading rules. The source order really matters when you have a global scope.
  3. Inheritance. The rules can inheritance between their and you can expect a different behavior due to this characteristic.
  4. Selector specificity. One of the biggest problems when creating style sheets comes from the fact that the operation of selectors is not known in depth.

These problems are recurring on large projects due to there are a large number of people working without a framework or work rules. Sadly, the result of this circumstance is that the stylesheets to be chaotic.

Therefore, the solution is writing CSS in specificity order and that order is provided by ITCSS.

ITCSS (Inverted Triangle CSS)

In simple words, ITCSS is a methodology for organizing CSS files within layers-from generic to explicit, and from low to high specificity.

In the following image you can see the inverted triangle:


The layers of the triangle are the follows:

  1. Settings — used with preprocessors and contain font, colors definitions, etc. In this layer is common define the variables that can customize the template.
  2. Tools — globally used mixins and functions. This layer is only used if we use a preprocessor as SASS.
  3. Generic — reset and/or normalize styles, box-sizing definition, etc. It is important to note that this is the first layer of the triangle that generates CSS.
  4. Elements — styling for bare HTML elements (like H1, A, header, footer, …). These come with default styling from the browser so we must to redefine them here.
  5. Objects — class-based selectors which define undecorated design patterns, for example media object known from OOCSS such as list, radio-button. The Daniel Fornell’s codepen https://codepen.io/collection/DmzVOM/ shows you a list of objects designed using this architecture.
  6. Components — specific UI components. The components of our page, for example button, card, concrete-list, etc..
  7. Utilities — utilities and helper classes with ability to override anything which goes before in the triangle.

Real example — This blog!

This blog is developed using the powerful GhostCMS tool which allows us to make our own templates using handlebars in conjunction with CSS. However, to generate the CSS of this topic I have decided to use the ITCSS architecture using SASS which will transpile the code to a final style sheet in CSS that will give the visual aspect of this theme.

Therefore, the first thing we have to see is the directory structure of this project, as shown in the following image.

In this structure you can observe the following parts:

  • partials: Where are the handlebar files where the different parts of a blog page are structured, such as footer, header, pagination, postlists, sidebar.
  • assets: Where we find the following subfolders:
  • css: This is where we structure our style sheets using ITCSS.
  • font: Different fonts.
  • img: Images.
  • js: Required JavaScript libraries such as highlight.js.
  • /: In the root directory we find the handlebar files corresponding to the index, post, tag and default and some configuration files such as package.json or gulpfile.

Next, we will describe the .scss files of each of the ITCSS layers in order to be able to see what has been included in each of the layers.


You can see that what this file does is to define the fonts to be used and the color palette that will be used throughout the theme. In this file we mainly have the definition of all the variables that we want to be able to customize later.

The content of tools.scss file is as follows:

In this layer we still do not produce CSS but we are defining tools (functions) that will facilitate repetitive tasks in higher layers. At this level we have defined three functions:

  • box-size. That allows us to define the size of the boxes using two parameters.
  • flex. This mixin configures the Flex-Layout rules for the different containers.
  • postTitle. This mixin generates several CSS rules that are repeated in upper layers but that change their container and some rules are overwritten. For this reason instead of repeating these rules in each one of these rules we have extracted the rules common to a function in order to have a single point of entry for the common code.


The generic file is quite simple since it only contains a rule that allows us to change the margins and paddings of all the elements of the page, as well as to configure the default typography.

In addition, a rule related to the comment style of the disqus comment service is included in this section. You can see that for the plugin to work properly it is necessary to assign an identifier (id = 'disqus_thread') to the container, but this would totally break the ITCSS architecture. For this, a technique has been used to decrease the specificity of that element up to the attribute level (using the selector of attributes).


In this layer we configure the styles related to the html and body elements.


In this layer, the general rules that affect the HTML elements must be structured. Note that there is no class defined but only use of html elements, pseudo-classes and pseudo-elements. In this layer we have used the power of SASS to nest CSS rules and not have such a verbose code. In fact, if we were to see the specificity graph, there would appear peaks that are related to the nesting levels that we are generating, which is normal.


/** EMPTY **/

At this time of the design of our template we do not have any rule associated with objects since the rules have been divided into elements when they have been very low level and components when they have gained enough semantic value. Therefore, right now we do not have any rules in this section but it is not bad to have it defined since in constant refactorings and improvements of our architecture we can make use of this layer.


This layer is of higher level and therefore here we find the rules of greater specificity and it is here where the last touches are adapted. If you look at the layer there are many rules that are defining elements with semantic value for our theme. This is where the final touches are put, taking into account that Web pages are a composition of many components


Finally, the utility layer is reserved as a “catch-all” in our case we have left here animations that could have gone perfectly to lower layers since they are generic but we have preferred to transfer it to utilities.

Run the code and import

To transform the content of SASS to CSS and to have it minified I have created the following npm’s scripts.


Finally, I’ve shown you how I created the theme of this blog using this architecture, the theme is free, open source on GitHub so that it can be used by anyone who wants to use it on their blog.

More, more and more…

Originally published at www.carloscaballero.io.

Hi! My name is Carlos Caballero and I’m PhD. in Computer Science from Málaga, Spain. Teaching developers and degree/master computer science how to be experts!

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