# Iris CSS: rules for AI assistants Read this before you write HTML or CSS for a page that uses Iris CSS. Full docs: https://iriscss.com/llms.txt ## How Iris CSS works - Plain semantic HTML is styled with no classes. Write the right element first: `button`, `form`, `label`, `table`, `dialog`, `details`, `nav`, `article`, `header`, `footer`. - Classes are optional modifiers with no prefix: `.primary`, `.outlined`, `.large`. Add one only for a variant or a component that HTML has no element for. - Custom properties carry the `--i-` prefix, such as `--i-color-primary` or `--i-spacing`. Change the look by overriding them, on `:root` for the whole page or on one element. - Light and dark mode are automatic. `data-theme="light"` or `data-theme="dark"` (or the `.light` and `.dark` classes) forces a theme on any element and everything inside it. - Every Iris rule is in a cascade layer, so plain CSS you write wins without `!important` or extra specificity. - Interactive components use native HTML: `popover`, `dialog` with invoker commands, `details`. They need no JavaScript. ## Do not - Do not use classes from other frameworks. `.btn`, `.btn-primary`, `.row`, `.col-md-6`, `.d-flex`, `.mt-3`, `.p-4`, `.text-gray-500`, `.navbar-nav`, `.form-control`, `.modal-dialog` and Tailwind utilities do nothing in Iris CSS. - Do not invent classes. If a class is not listed below, it does not exist. Use plain CSS for anything else. - Do not add classes to elements that are already styled. `