{"id":26855,"date":"2016-07-18T21:01:30","date_gmt":"2016-07-18T13:01:30","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26855"},"modified":"2022-10-14T20:41:10","modified_gmt":"2022-10-14T12:41:10","slug":"inverted-triangle-css-web-development","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/inverted-triangle-css-web-development\/","title":{"rendered":"Introduction to ITCSS for Web Developers"},"content":{"rendered":"

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

It\u2019s not a library or a framework, but a methodology of writing code<\/strong> that\u2019s scalable and easy to manipulate. The benefits of ITCSS range from simple code organization<\/strong> to smaller file sizes<\/a>, and a greater understanding of CSS architecture.<\/p>\n

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

What is ITCSS?<\/h2>\n

Modern ways of organizing CSS often fall back to modularization<\/strong> or CSS objects<\/strong> to construct abstract ideas.<\/p>\n

The new idea of Inverted Triangle CSS<\/a> is a layered way of splitting CSS properties<\/strong> based on their level of specificity and importance<\/strong>. It\u2019s a less known method compared to SMACSS and OOCSS<\/a> \u2013 although both can be combined with ITCSS.<\/p>\n

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