Address: 2/5, Idowu Ajao Street, Ajao Estate, Anthony Village, Lagos State.
Phone: 0809 844 5537
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.
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:
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.
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.