01 290 2683Call for your website design jobs 24/7Join Us
Menu
Intro to ITCSS for Web Developers

Intro to ITCSS for Web Developers

July 25, 2016 Website design News 0

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 byHarry 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 tocreate 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 .

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 specificitymakes 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 inthis GitHub repo. It’s hosted by the CSS Wizardry account which is Harry Roberts’ personal website.

Add your comment

No comments so far. Be first to leave comment below.

Your email address will not be published. Required fields are marked *

Post your comment