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.

Headings add a top margin too, a larger multiple of --flow_margin. A heading that opens a padded or bordered box - .panel, .pane, aside, blockquote, fieldset, dialog, li, td, or th - drops it, so it sits on the box's padding instead of stacking a gap on it.

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;
}

Interaction and ARIA states
#

Links and form controls show focus as an outline ring, and only the ring - focus adds no fill. The ring follows :focus-visible, so keyboard focus and a click into a text field or select show it, while a mouse click on a link, button, or checkbox doesn't leave it behind.

The base styles read ARIA state attributes on the elements they apply to:

aria-pressed="true" on a button, or on any .selectable or .menuitem, takes the .selected look, and stays clickable like .deselectable
aria-current on a link (any value but false) takes the selected link look
aria-disabled="true" on a button or form control takes the disabled look with no hover or active states, but keeps its focus ring and pointer events, so it stays reachable by keyboard and can explain why it's disabled; on a .deselectable .menuitem or .selectable, it drops the pointer cursor
aria-invalid="true" on an input, textarea, or select turns its border and focus ring negative

Under forced colors (Windows High Contrast), the states painted only by a background are restated in system colors: a checked radio, a range, and the edges of .panel and .pane in the text color, and selection - selected and pressed buttons, .menuitem, .selectable - as a Highlight border and inner band that becomes a double Highlight ring when focused, while a focus ring alone stays the text color. Labels keep the system's colors, and so do icons drawn in currentColor. Selects get their native arrow back.

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