ITCSS (Inverted Triangle CSS) from Harry Roberts, is a way of structuring CSS in such a way that the most general selectors to trickle down to the most specific selectors, as if they're moving from the top of an bottom of a triangle to the pinnacle of it.

In this implementation there are a few differences. Normally in ITCSS, you could have a tools like Sass functions, but most of the tools we'd need are coming in CSS and transpiled by PostCSS plugins.

Objects have minimal visual styling in Obsidian. This is a set between the reset styling and the component level styling because it's beyond an element.

Settings contain base styles but often module variables are only contained in that module; there are a few exceptions (like shadow values).

Settings

Settings should contain global and base settings, project media queries, mixins, custom selectors.

Generic

The generic layer is for reset styles, document wide selectors.

Elements

Elements are for styling specific HTML elements and extending responsive styling for elements (for instance [tables](/elements#tables-section)). They're a base style for elements meant to be extended by other styles down the triangle.

Objects

Objects define common reusable patterns. They are have more structure than skin, usually have no visual style (color, background, etc) applied; it's the bare minimum UI. Objects are things like grids or the media object.

Components

Components are visual pieces of UI. They're more complex than objects, often containing many elements.

Utilities

Utilities are helper classes meant to override any default or that extend specific styling. They are single use utilities, meant to only apply a single value.

yarn add obsidian.css