# Cascade layers

Source: https://iriscss.com/documentation/overview/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.

```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.

```css
@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.