Style blocks

Rat has two ways to write CSS: a section header that takes a selector (> ), with declarations indented under it; or full-file blocks under styles/ for global rules. Either way, the output is plain CSS bundled into the page — no preprocessor, no class-name hashing.

Selector-form style block

Co-locate styles with markup

> [.btn] reads as "a style block whose selector is .btn". The body is one declaration per line. Multiple selectors and pseudos work the same way.

> [.btn]
    padding: 0.5rem 1rem;
    border: 1px solid currentColor;

> [.btn:hover]
    background: var(--accent);

> page
<button class['btn']> Click me

Named style block

> Style — long form

The long form takes a name. The selector goes in the body verbatim, the declarations after. Use this when the selector is complex enough that the short form gets awkward.

> Style [card]
    .card { border: 1px solid padding: 1rem; }

Global styles in styles/

styles/global.styles.rat

Files under styles/ contribute their blocks to every page's bundled CSS. Naming the file *.styles.rat is a convention so directory listings show what's CSS at a glance; the loader doesn't require the suffix.

# styles/global.styles.rat
> [body]
    font-family: ui-sans-serif, system-ui;
    color: {  }
> [a]
    color: var(--accent);

Next: CSS variables — declaring tokens once and reusing them in bracket interpolation.