sitereal
v0.1

Building

Global styles

Project-wide stylesheets for the classes more than one page uses.

A project stylesheet holds the rules that are not about one page. You style .button once and every page has it.

Sheets, not one blob

Styles are kept as named sheets — "Shell", "Prose", "Utilities", whatever you find useful — and compiled into one file:

src/styles/generated/global.css

Every page imports it. Saving a global sheet re-emits every page, because a rule here can change any of them.

What belongs here

  • A class more than one page uses.
  • The shell of a layout that a template's markup wears.
  • Small utilities of your own, if you want them.

What does not belong here: rules about one page (they belong to the page), rules about one component (they travel with the component), and tokens (they belong to the design system or to variables).

How rules are written

The same house style as everywhere else in sitereal: one top-level rule per element, and everything about that element nested inside it.

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  border-radius: var(--radius-m);

  &:hover { border-color: var(--primary); }
  &::after { content: ""; }
  & > svg { inline-size: 1.5rem; }

  @media (max-width: 48rem) {
    flex-direction: column;
  }
}

There is one boundary: an element you can select needs its own top-level rule, keyed by its own selector. Folding .card__title into .card as a nested &__title would leave the Style panel opening an empty rule when someone selects that title. Nest states, breakpoints, pseudo-elements and children that have no class; give named nodes their own rule.

The cascade you are writing into

framework.css      the design system   :where(…) — zero specificity
global.css         these sheets
templates/<id>.css a template's own
components         scoped by Astro
pages/<route>.css  that page's own

Because the design system's selectors have zero specificity, a class you write here always wins — no !important, no source-order games.

Bare tags

Avoid them. h2 { … } in a project sheet reaches every heading on the site, including ones inside components you have not looked at in a month. Address a class, an id, or the element attribute ([builder-data-element="heading"]) — and if what you mean is "every heading on the site", say it in the design system's Elements module, which is exactly that question.