Modern CSS resets - Minimal picks

Modern-CSS-resets-Minimal-picks.md

Below are short, practical CSS reset snippets focused on modern browsers — minimal, accessible, and grounded in current best‑practice guidance. Each has a succinct explanation and a reference to authoritative discussion or source.

---

🔹 1. Andy Bell’s Modern Reset — clean, practical baseline

/* Box sizing */
*, *::before, *::after {
  box-sizing: border-box;           /* predictable sizing */
}

/* Remove default margins */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

/* No list decoration for role-based lists only */
ul[role="list"], ol[role="list"] {
  list-style: none;
}

/* Responsive images */
img, picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for form elements */
input, button, textarea, select {
  font: inherit;
}

/* Smooth scroll when focused */
html:focus-within {
  scroll-behavior: smooth;
}

Why this works:

• Sets box-sizing: border-box everywhere for intuitive layouts.
• Removes default spacing and list bullets only where role implies structural list (safer than universal removal).
• Ensures images scale, and inputs inherit UI typography.
• Based on a widely referenced modern reset approach. (Gist)

---

🔹 2. Ultra‑Minimal Base Reset

/* Box model reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Remove core defaults */
body {
  margin: 0;
  line-height: 1.5;                /* improves readability & accessibility */
}

/* Responsive media */
img, video {
  max-width: 100%;
  height: auto;
}

Purpose: Strips only the most problematic defaults:

• Unifies box model.
• Removes body margin that varies per browser.
• Makes images/videos responsive by default.
• Good for applications where you want to preserve most native semantics while fixing key layout issues. (mattbrictson.com)

---

🔹 3. With Reduced‑Motion Respect (Accessibility)

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

Why include this: Honor user preference for reduced motion — a best practice for accessibility in modern UIs. This isn’t a replacement for full reset, but a recommended snippet to add to your base. (DEV Community)

---

🔹 4. Optional Hybrid Normalize + Reset (Recommended)

Import normalize first (optional):

@import "normalize.css"; /* preserves sensible defaults while fixing cross‑browser inconsistencies */

Then add minimal reset rules:

/* Core reset */
*:where(:not(html, img, video, svg)):not(svg *, symbol *) {
  all: unset;
  display: revert;
}

/* Box model */
*, *::before, *::after {
  box-sizing: border-box;
}

Why hybrid:

• normalize.css addresses subtle browser quirks and preserves useful defaults rather than wiping everything. (necolas.github.io)
• The hybrid reset then strips unnecessary defaults where you want full control.

---

📌 Notes (Best Practice)

• Reset vs Normalize: A reset removes virtually all default browser styles; normalize makes them consistent across browsers without removing them. (Stack Overflow)

• Use cascade layers (@layer reset) or :where() to reduce specificity issues in larger stylesheets. (pawelgrzybek.com)

• Accessibility: Minimal resets shouldn’t remove semantic default behaviors (e.g., list bullets or heading sizes) unless you plan to reintroduce them intentionally later.