ITCSSmalli

ITCSSmalli is a CSS architecture methodology that aims to provide a structured and scalable approach to writing Cascading Style Sheets. It stands for Inverted Triangle CSS Structure, and the "Malli" part refers to a lighter, more modular implementation. The core principle of ITCSSmalli is to organize CSS selectors by their specificity and location within a project, starting with the most generic and ending with the most specific.

The inverted triangle structure is divided into several layers, each with a distinct purpose. These layers, from top to bottom, are: Settings, Tools, Generic, Elements, Objects, Components, and Utilities. Settings contain global configurations like variables and design tokens. Tools provide mixins and functions. Generic styles apply to HTML elements, like resets and typography. Elements are more specific HTML tags. Objects represent reusable UI patterns that are independent of their content. Components are specific, complex UI elements. Finally, Utilities are single-purpose, highly specific classes used to override or fine-tune styles.

By adhering to this structure, ITCSSmalli helps to manage CSS complexity, reduce selector specificity conflicts, and improve the maintainability of stylesheets, especially in large and collaborative projects. The "Malli" aspect emphasizes modularity and the avoidance of unnecessary complexity, making it suitable for projects that may not require the full breadth of a traditional ITCSS implementation. The deliberate ordering of these layers ensures that styles cascade predictably, and changes in one layer have minimal impact on others.