Introduction to ITCSS for Web Developers

There’s a handful of great methods for structuring CSS code, and they all work in different ways. The most popular ones are OOCSS and SMACSS, but there’s also a lesser known method called ITCSS (Inverted Triangle CSS) created by Harry Roberts.

It’s not a library or a framework, but a methodology of writing code that’s scalable and easy to manipulate. The benefits of ITCSS range from simple code organization to smaller file sizes, and a greater understanding of CSS architecture.

ITCSS is not for everyone, but it provides a professional way to look at stylesheets with clarity during the coding process. Let’s delve into the concepts behind ITCSS, and see how they can be applied to web projects.

What is ITCSS?

Modern ways of organizing CSS often fall back to modularization or CSS objects to construct abstract ideas.

The new idea of Inverted Triangle CSS is a layered way of splitting CSS properties based on their level of specificity and importance. It’s a less known method compared to SMACSS and OOCSS – although both can be combined with ITCSS.

Since ITCSS is mostly proprietary, no detailed rule book exists about its usage. Only a set of specific principles is at our disposal. The author speaks about them in the video below.

By default, ITCSS uses the same principles as OOCSS but with greater separation based on specificity. So if you’re already familiar with OOCSS, consider this a unique alternate CSS architecture to try.

Here are some of the greatest benefits of using ITCSS:

• Page objects can be split into their own CSS/SCSS files for reusability. It’s simple to copy/paste and extend every object into other projects.
• Depth of specificity is up to you.
• There’s no set folder structure, and no required use of preprocessing tools.
• You can merge concepts from other methodologies such as CSS modules to create your own hybrid workflow.

The ITCSS System

Let’s take a look at how the Inverted Triangle Model works using the following illustration from Lubos Kmetko’s post.

A directional flow from the flat top of the inverted triangle down to the tip at the bottom symbolizes an increase in specificity. This focus on less specificity makes it easier to reuse classes across a site multiple times.

Each subsection of the triangle may be considered a separate file or group of files, although you don’t need to write code in that way. It makes more sense for Sass/Less users because of the import feature. Just think of each subsection as a methodology for splitting up and organizing reusable CSS code.

Let’s take a quick look at each section of the inverted triangle moving from the top down to the tip.

• Settings – Preprocessor variables and methods (no actual CSS output)
• Tools – Mixins and functions (no actual CSS output)
• Generic – CSS resets which might include Eric Meyer’s reset, Normalize.css, or your own batch of code
• Elements – Single HTML element selectors without classes
• Objects – Classes for page structure typically following the OOCSS methodology
• Components – Aesthetic classes for styling any & all page elements (often combined with the structure of object classes)
• Trumps – The most specific styles for overriding anything else in the triangle

Each layer of the inverted triangle can be adjusted to suit your needs. So if you don’t use a CSS preprocessor then you won’t need the Settings or Tools layers.

You should feel free to interpret each subsection as you see fit. For example, Jordan Koschei explains how he combined structure and aesthetics together into object classes, leaving very little in the Components section.

ITCSS has no hard-and-fast rules that you must follow. There is no ITCSS compliance checker, and nobody will scream at you for slightly altering this model.

Although ITCSS’ creator Harry Roberts was interested to keep his methods proprietary for internal use, you can find an open source example of ITCSS in this GitHub repo. It’s hosted by the CSS Wizardry account which is Harry Roberts’ personal website.

BEM + IT = BEMIT Naming

One of the most popular CSS naming schemes is BEM. This stands for Block-Element-Modifier and follows a very particular syntax.

Each element in BEM describes a naming convention for CSS classes:

• Blocks are classes for individual elements which can be replicated and stand alone.
• Elements are always part of a block
• Modifiers always modify a block or element to slightly change its appearance (on/off, active/inactive, fixed, static, highlight/neutral).

BEMIT is the naming convention adopted by ITCSS, which borrows ideas from BEM while implementing new ideas with ITCSS.

BEM syntax dictates very specific rules. Below is a sample from the BEM website:

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

Blocks have names with either no separation, or names separated by one dash or one underscore. Elements use two underscores and they describe internal elements consistent with that particular block. Modifiers work the same way but use two dashes for identification.

Harry delves deeper into BEMIT in this blog post. His description is very concise and it shows that the true nature of ITCSS is to play friendly with other CSS methodologies.

“I decided to extend BEM to become BEMIT. BEMIT doesn’t add any other types of class – we still only ever have Blocks, Elements, or Modifiers – but it does add usage and state information.”

Harry defines namespaces for objects appearing as prefixes for each major class name. They break down as o- for objects, c- for components, and u- for utilities (like clearfix or text centering).

Here are some sample code representing typical BEMIT naming conventions.

<div class="o-media  c-user  c-user--premium">
  <img src="" alt="" class="o-media__img  c-user__photo  c-avatar" />
  <p class="o-media__body  c-user__bio">...</p>
</div>

He also recommends using the @ suffix for classes based on media styles. So the .o-media class might change to .o-media@lg for large screens, and .o-media@md for mid-sized screens.

Personally, I think the additional suffixes are too convoluted for basic web projects. I think most developers would rather use common media queries, and rewrite the classes at different breakpoints. But I can’t say either method is right or wrong, and anyone can individually decide if they want to use BEMIT or not.

I highly recommend reading this intro BEMIT article to learn more about why ITCSS extended BEM, and how you might want to name your CSS classes.

ITCSS can be summarized as an organizational method for writing reusable and scalable CSS. BEM is the preferred naming syntax, and BEMIT extends this to work with namespaces for more specific and recognizable code.

There’s a lot to learn, and if you’re new to CSS this will be a tough concept to break. But if you’re willing to learn, I guarantee you’ll be surprised with the sleek nature of ITCSS code.

Wrapping Up

Front-end developers are always looking to optimize their workflow. ITCSS is just another method that can contribute to an improved method of structuring complex websites.

The difficulty is learning how it works in real project work. If you have the temerity, and drive to learn then ITCSS may be something worth adding to your toolkit. Even though I haven’t found any official documentation, there are still a lot of resources online to learn about ITCSS.

• Manage large-scale web projects with new CSS architecture ITCSS (creativebloq.com)
• Managing CSS Projects with ITCSS – Presentation Slides (speakerdeck.com)
• CSS Projects with ITCSS (1hr video presentation)
• ITCSS – An interesting way to organize large-scale projects (css-tricks.com)

(Cover photo via speakerdeck.com)