A good CSS reset provides a consistent foundation. Here's a modern approach.
Minimal Modern Reset#
1/* Box sizing */
2*,
3*::before,
4*::after {
5 box-sizing: border-box;
6}
7
8/* Remove default margin and padding */
9* {
10 margin: 0;
11 padding: 0;
12}
13
14/* Improve text rendering */
15html {
16 -webkit-font-smoothing: antialiased;
17 -moz-osx-font-smoothing: grayscale;
18 text-size-adjust: 100%;
19}
20
21/* Set core body defaults */
22body {
23 min-height: 100vh;
24 line-height: 1.5;
25 font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
26 Roboto, 'Helvetica Neue', Arial, sans-serif;
27}
28
29/* Remove list styles */
30ul,
31ol {
32 list-style: none;
33}
34
35/* Inherit fonts for form elements */
36input,
37button,
38textarea,
39select {
40 font: inherit;
41}
42
43/* Remove button styles */
44button {
45 background: none;
46 border: none;
47 cursor: pointer;
48}
49
50/* Make images responsive */
51img,
52picture,
53video,
54canvas,
55svg {
56 display: block;
57 max-width: 100%;
58 height: auto;
59}
60
61/* Remove anchor underlines */
62a {
63 text-decoration: none;
64 color: inherit;
65}
66
67/* Avoid text overflow */
68p,
69h1,
70h2,
71h3,
72h4,
73h5,
74h6 {
75 overflow-wrap: break-word;
76}Typography Base#
1/* Root font size for rem calculations */
2:root {
3 --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
4 Roboto, 'Helvetica Neue', Arial, sans-serif;
5 --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
6 'Liberation Mono', monospace;
7
8 /* Type scale */
9 --text-xs: 0.75rem;
10 --text-sm: 0.875rem;
11 --text-base: 1rem;
12 --text-lg: 1.125rem;
13 --text-xl: 1.25rem;
14 --text-2xl: 1.5rem;
15 --text-3xl: 1.875rem;
16 --text-4xl: 2.25rem;
17 --text-5xl: 3rem;
18
19 /* Line heights */
20 --leading-tight: 1.25;
21 --leading-normal: 1.5;
22 --leading-relaxed: 1.75;
23
24 /* Font weights */
25 --font-normal: 400;
26 --font-medium: 500;
27 --font-semibold: 600;
28 --font-bold: 700;
29}
30
31body {
32 font-family: var(--font-sans);
33 font-size: var(--text-base);
34 line-height: var(--leading-normal);
35 font-weight: var(--font-normal);
36}
37
38h1, h2, h3, h4, h5, h6 {
39 line-height: var(--leading-tight);
40 font-weight: var(--font-bold);
41}
42
43h1 { font-size: var(--text-4xl); }
44h2 { font-size: var(--text-3xl); }
45h3 { font-size: var(--text-2xl); }
46h4 { font-size: var(--text-xl); }
47h5 { font-size: var(--text-lg); }
48h6 { font-size: var(--text-base); }
49
50code, kbd, samp, pre {
51 font-family: var(--font-mono);
52 font-size: 0.9em;
53}Color System#
1:root {
2 /* Neutral colors */
3 --gray-50: #f9fafb;
4 --gray-100: #f3f4f6;
5 --gray-200: #e5e7eb;
6 --gray-300: #d1d5db;
7 --gray-400: #9ca3af;
8 --gray-500: #6b7280;
9 --gray-600: #4b5563;
10 --gray-700: #374151;
11 --gray-800: #1f2937;
12 --gray-900: #111827;
13
14 /* Primary colors */
15 --primary-50: #eff6ff;
16 --primary-500: #3b82f6;
17 --primary-600: #2563eb;
18 --primary-700: #1d4ed8;
19
20 /* Semantic colors */
21 --color-text: var(--gray-900);
22 --color-text-muted: var(--gray-600);
23 --color-background: white;
24 --color-border: var(--gray-200);
25
26 /* Dark mode */
27 @media (prefers-color-scheme: dark) {
28 --color-text: var(--gray-100);
29 --color-text-muted: var(--gray-400);
30 --color-background: var(--gray-900);
31 --color-border: var(--gray-700);
32 }
33}
34
35body {
36 color: var(--color-text);
37 background-color: var(--color-background);
38}Spacing System#
1:root {
2 --space-0: 0;
3 --space-1: 0.25rem; /* 4px */
4 --space-2: 0.5rem; /* 8px */
5 --space-3: 0.75rem; /* 12px */
6 --space-4: 1rem; /* 16px */
7 --space-5: 1.25rem; /* 20px */
8 --space-6: 1.5rem; /* 24px */
9 --space-8: 2rem; /* 32px */
10 --space-10: 2.5rem; /* 40px */
11 --space-12: 3rem; /* 48px */
12 --space-16: 4rem; /* 64px */
13 --space-20: 5rem; /* 80px */
14 --space-24: 6rem; /* 96px */
15}
16
17/* Container */
18.container {
19 width: 100%;
20 max-width: 1200px;
21 margin-inline: auto;
22 padding-inline: var(--space-4);
23}
24
25@media (min-width: 640px) {
26 .container {
27 padding-inline: var(--space-6);
28 }
29}Accessibility#
1/* Focus styles */
2:focus {
3 outline: none;
4}
5
6:focus-visible {
7 outline: 2px solid var(--primary-500);
8 outline-offset: 2px;
9}
10
11/* Skip link */
12.skip-link {
13 position: absolute;
14 top: -40px;
15 left: 0;
16 padding: var(--space-2) var(--space-4);
17 background: var(--primary-600);
18 color: white;
19 z-index: 100;
20}
21
22.skip-link:focus {
23 top: 0;
24}
25
26/* Reduced motion */
27@media (prefers-reduced-motion: reduce) {
28 *,
29 *::before,
30 *::after {
31 animation-duration: 0.01ms !important;
32 animation-iteration-count: 1 !important;
33 transition-duration: 0.01ms !important;
34 scroll-behavior: auto !important;
35 }
36}
37
38/* Screen reader only */
39.sr-only {
40 position: absolute;
41 width: 1px;
42 height: 1px;
43 padding: 0;
44 margin: -1px;
45 overflow: hidden;
46 clip: rect(0, 0, 0, 0);
47 white-space: nowrap;
48 border: 0;
49}
50
51/* Not screen reader only (show visually) */
52.not-sr-only {
53 position: static;
54 width: auto;
55 height: auto;
56 padding: 0;
57 margin: 0;
58 overflow: visible;
59 clip: auto;
60 white-space: normal;
61}Form Elements#
1/* Form reset */
2input,
3textarea,
4select {
5 appearance: none;
6 background-color: transparent;
7 border: 1px solid var(--color-border);
8 border-radius: 0.375rem;
9 padding: var(--space-2) var(--space-3);
10 font-size: var(--text-base);
11 line-height: var(--leading-normal);
12 color: inherit;
13}
14
15input:focus,
16textarea:focus,
17select:focus {
18 border-color: var(--primary-500);
19 outline: none;
20 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
21}
22
23/* Placeholder */
24::placeholder {
25 color: var(--gray-400);
26 opacity: 1;
27}
28
29/* Disabled state */
30input:disabled,
31textarea:disabled,
32select:disabled,
33button:disabled {
34 opacity: 0.5;
35 cursor: not-allowed;
36}
37
38/* Checkbox and radio */
39input[type="checkbox"],
40input[type="radio"] {
41 width: 1rem;
42 height: 1rem;
43 border: 2px solid var(--color-border);
44 cursor: pointer;
45}
46
47input[type="checkbox"] {
48 border-radius: 0.25rem;
49}
50
51input[type="radio"] {
52 border-radius: 50%;
53}
54
55input[type="checkbox"]:checked,
56input[type="radio"]:checked {
57 background-color: var(--primary-500);
58 border-color: var(--primary-500);
59}Utility Classes#
1/* Display */
2.block { display: block; }
3.inline-block { display: inline-block; }
4.inline { display: inline; }
5.flex { display: flex; }
6.inline-flex { display: inline-flex; }
7.grid { display: grid; }
8.hidden { display: none; }
9
10/* Flexbox */
11.flex-row { flex-direction: row; }
12.flex-col { flex-direction: column; }
13.items-center { align-items: center; }
14.items-start { align-items: flex-start; }
15.items-end { align-items: flex-end; }
16.justify-center { justify-content: center; }
17.justify-between { justify-content: space-between; }
18.justify-end { justify-content: flex-end; }
19.flex-1 { flex: 1 1 0%; }
20.flex-wrap { flex-wrap: wrap; }
21.gap-1 { gap: var(--space-1); }
22.gap-2 { gap: var(--space-2); }
23.gap-4 { gap: var(--space-4); }
24.gap-8 { gap: var(--space-8); }
25
26/* Text */
27.text-center { text-align: center; }
28.text-left { text-align: left; }
29.text-right { text-align: right; }
30.font-bold { font-weight: var(--font-bold); }
31.font-medium { font-weight: var(--font-medium); }
32.uppercase { text-transform: uppercase; }
33.capitalize { text-transform: capitalize; }
34.truncate {
35 overflow: hidden;
36 text-overflow: ellipsis;
37 white-space: nowrap;
38}
39
40/* Sizing */
41.w-full { width: 100%; }
42.h-full { height: 100%; }
43.min-h-screen { min-height: 100vh; }
44
45/* Position */
46.relative { position: relative; }
47.absolute { position: absolute; }
48.fixed { position: fixed; }
49.sticky { position: sticky; }Complete Reset File#
1/* modern-reset.css */
2
3/* 1. Box sizing */
4*,
5*::before,
6*::after {
7 box-sizing: border-box;
8}
9
10/* 2. Remove margins and padding */
11* {
12 margin: 0;
13 padding: 0;
14}
15
16/* 3. Set up document */
17html {
18 -webkit-font-smoothing: antialiased;
19 -moz-osx-font-smoothing: grayscale;
20 text-size-adjust: 100%;
21 scroll-behavior: smooth;
22}
23
24@media (prefers-reduced-motion: reduce) {
25 html {
26 scroll-behavior: auto;
27 }
28}
29
30/* 4. Body defaults */
31body {
32 min-height: 100vh;
33 line-height: 1.5;
34 font-family: system-ui, sans-serif;
35}
36
37/* 5. Typography */
38h1, h2, h3, h4, h5, h6 {
39 text-wrap: balance;
40}
41
42p {
43 text-wrap: pretty;
44}
45
46/* 6. Media */
47img, picture, video, canvas, svg {
48 display: block;
49 max-width: 100%;
50}
51
52/* 7. Form elements */
53input, button, textarea, select {
54 font: inherit;
55}
56
57/* 8. Interactive elements */
58a {
59 text-decoration: none;
60 color: inherit;
61}
62
63button {
64 background: none;
65 border: none;
66 cursor: pointer;
67}
68
69/* 9. Lists */
70ul, ol {
71 list-style: none;
72}
73
74/* 10. Tables */
75table {
76 border-collapse: collapse;
77 border-spacing: 0;
78}
79
80/* 11. Accessibility */
81:focus-visible {
82 outline: 2px solid currentColor;
83 outline-offset: 2px;
84}
85
86@media (prefers-reduced-motion: reduce) {
87 *, *::before, *::after {
88 animation-duration: 0.01ms !important;
89 transition-duration: 0.01ms !important;
90 }
91}Best Practices#
Reset:
✓ Use box-sizing: border-box
✓ Remove default margins
✓ Make images responsive
✓ Inherit fonts in forms
Accessibility:
✓ Respect prefers-reduced-motion
✓ Provide focus styles
✓ Include skip links
✓ Support screen readers
Organization:
✓ Use CSS custom properties
✓ Create consistent spacing
✓ Define type scale
✓ Document design tokens
Conclusion#
A modern CSS reset provides a clean foundation while respecting accessibility. Use CSS custom properties for theming, establish consistent spacing and typography scales, and always consider reduced motion preferences. Keep the reset minimal and extend with utilities as needed.