semantic #

fuz_css styles HTML elements in its reset stylesheet, so semantic markup gets themed and color-scheme-aware styling automatically - utility classes optional. The goal is to be accessible and attractive out of the box, minimal yet extensible.

Layers and specificity
#

All opinionated styles live in the fuz.base cascade layer, so your unlayered styles and the generated utility classes override them by layer order alone. Their selectors are also wrapped in :where() for zero specificity, so overrides stay easy even inside the fuz layers. The exceptions are the document-wide rules: :root, body, [hidden], and ::selection.

/* any styles you apply will override these */
:where(a:not(.unstyled)) {
  color: var(--link_color);
  font-weight: 700;
}

:where(button:not(.unstyled)) {
  background-color: var(--button_fill);
  border-radius: var(--border_radius, var(--control_radius));
}

.unstyled escape hatch
#

Add the .unstyled builtin class to opt out of decorative styling while keeping reset normalizations. Works for both decorative containers and interactive elements like links, buttons, inputs, and summary.

<a href="/home">styled link</a>
<a href="/home" class="unstyled">unstyled link</a>

styled link vs unstyled link

<button>styled button</button>
<button class="unstyled">unstyled button</button>

Document flow by default
#

Block elements get margin-bottom via :not(:last-child), creating natural vertical rhythm without trailing margins.

:where(
  :is(p, ul, ...[many others])
    :not(:last-child):not(.unstyled)
) {
  margin-bottom: var(--flow_margin, var(--space_lg));
}

The --flow_margin variable is unset by default, falling back to var(--space_lg). Size composite classes like .sized_sm and .sized_lg set --flow_margin to adjust vertical rhythm for all flow elements and headings.

For elements not in the flow list, use the .mb_flow and .mt_flow composite classes to get the same size-responsive spacing. Use .mb_lg when you want a fixed value that ignores size composites.

⚠️ The :not(:last-child) creates unfortunate edge cases by coupling structure to style, including usage with Svelte's component-level CSS variables, because it adds a wrapper div. Perhaps the better global optimum is to omit the last child exception? This would add unwanted margin in many cases, but perhaps that's better overall; mb_0 removes it.

Flex containers reset flow margins
#

The .row layout composite resets margins on its direct children. Flow margins make less sense in horizontal flex layout - for spacing prefer gap utilities like .gap_md and gap: var(--space_sm) instead.

:where(.row > *) {
  margin: 0;
}

Element-specific docs
#

See the related docs for specifics:

buttons - button states, colors, variants
elements - links, lists, tables, code, details
forms - inputs, labels, checkboxes, selects
typography - headings, fonts, text styles