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.

Low specificity
#

All opinionated styles use :where() selectors, giving them zero specificity beyond the element itself. Your styles and utility classes override defaults without specificity battles.

/* 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_sm);
}

.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). Override classes like .compact set --flow_margin to tighten 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 compact-responsive spacing. Use .mb_lg when you want a fixed value that ignores .compact.

⚠️ 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 layout composites .row, .box, and .column reset margins on their direct children. Flow margins make less sense in flex layout -- for spacing prefer gap utilities like .gap_md and var(--gap_sm) instead.

:where(.row, .box, .column) > * {
  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