ITCSS (Inverted Triangle architecture for CSS) is a css architecture introduced in late 2014 by Harry Roberts (CSS Wizardry).

It's based on the assumption that:

Managing CSS at scale is hard; and a lot harder than it should be. ITCSS is a simple, effective, and as-yet unpublished methodology to help manage, maintain, and scale CSS projects of all sizes.

ITCSS exploits the cascading property of CSS taking advantage of a sane selector specificity order.

ITCSS can be used with preprocessors or without them and is compatible with CSS methodologies like BEM, SMACSS or OOCSS.

Concept and ITCSS Fundamentals

One of the key principles of ITCSS is that it separates your CSS codebase to several sections (called layers), which take form of the inverted triangle:

Those layers are as follows:

• Settings – used with preprocessors and contain font, colors definitions, etc.
• Tools – globally used mixins and functions. It’s important not to output any CSS in the first 2 layers.
• Generic – reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.
• Elements – styling for bare HTML elements (like H1, A, etc.). These come with default styling from the browser so we can redefine them here.
• Objects – class-based selectors which define undecorated design patterns, for example media object known from OOCSS
• Components – specific UI components. This is where majority of our work takes place and our UI components are often composed of Objects and Components
• Trumps – utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class

The triangle also shows how styles represented by selectors are ordered in the resulting CSS: from generic styles to explicit ones, from low-specificity selectors to more specific ones (but still not too specific, IDs are not allowed) and from far reaching to localized ones:

Such CSS organization should help you avoid Specificity Wars and is represented by a healthy specificity graph.

Resources and Credits

A complete video presentation from Harry Roberts could be viewed online as a video or as slides. Additionally, there is a comprehensive summary, written by Lubos Kmetko, which was used as a standing point for writing the current tag info.