#CSS reset

Every browser ships its own default stylesheet, and those defaults are old, inconsistent between engines, and rarely what you'd choose for a modern site — headings with surprise margins, images that overflow their container, form controls that ignore your font. A CSS reset flattens that baseline so you're styling from a known starting point instead of against decades of accumulated defaults.

Salty CSS applies a small one by default. It's deliberately closer to "sane modern defaults" than to a nuke-everything reset: it corrects the handful of things that reliably cause trouble and leaves the rest of the browser's behaviour alone.

#What it addresses

The usual jobs of a reset, limited to the ones that reliably cause trouble:

• Box model — consistent, predictable element sizing.
• Spacing — browser default spacing removed, so vertical rhythm is yours to define rather than something to undo.
• Typography baseline — sane base text rendering on the document root.
• Media — images and other media behave predictably and stay inside their container.
• Text flow — long content wraps sensibly instead of overflowing.
• Interactive and form elements — links, buttons, and form controls inherit your typography and color instead of the system's.

For the exact rules, read the source below — that's the current list, and the reset stays intentionally small.

#Where it sits in the cascade

The reset is emitted into the reset layer, which Salty declares near the bottom of the order:

imports, reset, global, templates, fonts, l0 … l8

Everything you write — global styles, templates, components — lands in a higher layer, so the reset never fights you. Overriding any of it is just writing the value you want in your own styles; you never need !important to beat it.

#Configuration

The reset is controlled by the reset option in salty.config.ts:

import { defineConfig } from "@salty-css/astro/config";

export const config = defineConfig({
  reset: "none",
});

Passing a custom object replaces the built-in reset rather than merging with it. If you only want to adjust a rule or two, leave the reset on its default and write the override in your global styles — they sit in a higher layer and win automatically.

#Source

The full reset, as it ships:

export const saltyReset: GlobalStyles = {
  /** Set box model to border-box */
  "*, *::before, *::after": {
    boxSizing: "border-box",
  },
  /** Remove default margin */
  "*": {
    margin: 0,
  },
  /** Remove adjust font properties */
  html: {
    lineHeight: 1.15,
    textSizeAdjust: "100%",
    WebkitFontSmoothing: "antialiased",
  },
  /** Make media elements responsive */
  "img, picture, video, canvas, svg": {
    display: "block",
    maxWidth: "100%",
  },
  /** Avoid overflow of text */
  "p, h1, h2, h3, h4, h5, h6": {
    overflowWrap: "break-word",
  },
  /** Improve text wrapping */
  p: {
    textWrap: "pretty",
  },
  "h1, h2, h3, h4, h5, h6": {
    textWrap: "balance",
  },
  /** Improve link color */
  a: {
    color: "currentColor",
  },
  /** Improve button line height */
  button: {
    lineHeight: "1em",
    color: "currentColor",
  },
  /** Improve form elements */
  "input, optgroup, select, textarea": {
    fontFamily: "inherit",
    fontSize: "100%",
    lineHeight: "1.15em",
  },
};

Copy it as a starting point for your own reset object if you want most of it but not all — it's a plain style object, and defineConfig types it for you at the call site.