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 is CSS at a glance. The loader does not require the suffix.

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

See also CSS variables · Inline styles · HTML attributes