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 .unstyled 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
#

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(--space_lg);
}

This eliminates bottom margins on terminal elements. Edge cases can be fixed with .mb_lg or similar utility classes.

⚠️ 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.

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