Cascade layers

Every Iris CSS rule sits in a cascade layer, so your own styles win without specificity tricks.

CSS that is not in a layer always beats CSS that is. Write your styles as usual and they override Iris CSS, whatever the selector. A plain button rule of yours beats button.primary.outlined from Iris CSS.

/* Your stylesheet, loaded after Iris CSS or before it */
button {
  border-radius: 0;
}

Layer order

Inside Iris CSS, a later layer wins over an earlier one.

Layer	Holds
`iris.variables`	Every `--i-` custom property
`iris.base`	Themes, document defaults, landmarks, color class fills and the default focus ring
`iris.elements`	Typography, lists, links, buttons, tables, media, code, progress, meter and popover
`iris.forms`	Inputs, selects, textareas, checkboxes, radios, switches and special inputs
`iris.components`	Cards, modals, navbars and every other component
`iris.layout`	Container, grid, primitives, `menu` and hero. After the components, so a primitive's gap replaces the margins of what it holds
`iris.modifiers`	Color, size, style and state classes
`iris.utilities`	Display, alignment, overflow, palette, gradients and `.sr-only`
`iris.accessibility`	ARIA states, high contrast and user preferences
`iris.print`	Print styles

That is why .large beats a component's own size, and a utility such as .hidden beats both.

Your own layers

If you use layers yourself, declare the order once. Layers listed later win, so put Iris CSS first.

@layer iris, reset, app;
@import url("iris.min.css") layer(iris);

Iris CSS already names its layers iris.*, so listing iris first places all of them before yours.