Explain the inverted triangle of ITCSS

WHAT THIS TESTS This probes architectural understanding of how source order and specificity interact, and whether you can keep a large stylesheet predictable. ITCSS is a strategy for ordering CSS so the cascade resolves intentionally rather than accidentally.

A GOOD ANSWER COVERS ITCSS, the Inverted Triangle CSS, organizes rules into layers from the widest reach and lowest specificity at the top to the narrowest reach and highest specificity at the bottom. A common layer order is settings (variables, no output), tools (mixins and functions, no output), generic (resets and normalize), elements (bare HTML element styles), objects (unstyled structural patterns like the media object), components (recognizable UI pieces), and utilities or trumps (single-purpose overrides, sometimes with !important). The triangle widens at the top because those rules affect the most elements; it narrows at the bottom because those rules are increasingly specific and localized. The point is that specificity increases monotonically down the file, so later, more specific rules cleanly override earlier, broader ones.

COMMON WRONG ANSWERS Describing ITCSS only as a folder structure while ignoring that source order plus rising specificity is the whole point. Putting high-specificity component rules before generic resets, which forces !important hacks. Confusing ITCSS with BEM; ITCSS organizes layers, BEM names classes, and they are complementary.

LIKELY FOLLOW-UPS Where do settings and tools differ from layers that emit CSS? Why are utilities last and sometimes carry !important? How does ITCSS work with BEM? What problem does it solve compared with ad hoc ordering?

ONE CONCRETE EXAMPLE If a utility class for text alignment is loaded after the components layer, it can override a component's default alignment without a specificity battle, because ITCSS guarantees utilities come last. Reverse the order and the component would win, forcing you to add !important; ITCSS prevents that by design through deliberate layer sequencing.