Zazz Design Framework
base

_reset.css

Baseline resets and normalized native controls declared in @layer reset at zero specificity.

_reset.css normalizes browser defaults and native controls. It sits in @layer reset, allowing component and utility rules to override it easily.

Zero specificity

Reset rules wrap selectors in :where(), giving them (0,0,0) specificity:

:where(a) {
  color: unset;
  text-decoration: inherit;
}

Reset scope

Box model and container context

Resets margins, padding, and borders while setting border-box across elements:

:where(*, ::before, ::after, ::backdrop, ::file-selector-button) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

<body> is configured as a flex column spanning 100svh with scrollbar-gutter: stable. <body>, <main>, and section landmarks establish container query contexts.

Theme defaults

The reset assigns semantic tokens to baseline elements:

:where(html) {
  background-color: var(--background);
}
:where(body) {
  color: var(--foreground);
  background-color: var(--background);
}

Typography

Headings inherit font size and weight, allowing text-* utility classes to govern typography:

:where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
}

Lists omit markers and padding by default; tables collapse borders; text-wrap: pretty is applied to body elements.

Native controls

Normalizes inline <code>, form inputs, search cancel buttons, and date/time pickers using token hooks (--code-*, --placeholder-color). Text selection uses primary-tinted highlights via ::selection. The <kbd> baseline lives with the Kbd primitive.

Focus and logical properties

A global :focus-visible rule applies the focus ring across focusable elements. Dimensions use logical properties (inline-size, block-size, padding-inline) for bidirectional layout support.

Component-level resets

Specific native resets live alongside their respective component files: checkboxes in _checkbox.css, range inputs in _slider.css, switches in _switch.css, and select dropdowns in _select.css. These write directly into @layer reset.

On this page