css-reset
Include this reset at the top of your global stylesheet for every new web project. Each rule addresses a specific browser default that causes layout or rendering inconsistencies.
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
box-sizing: border-box;
}
/* 2. Remove default margin */
*:not(dialog) {
margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
html {
interpolate-size: allow-keywords;
}
}
body {
/* 4. Increase line-height */
line-height: 1.5;
/* 5. Improve text rendering */
-webkit-font-smoothing: antialiased;
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input, button, textarea, select {
font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* 9. Improve line wrapping */
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
/* 10. Create a root stacking context */
#root, #__next {
isolation: isolate;
}
Notes
- Rule 3 (
interpolate-size: allow-keywords) enables CSS transitions to/from keyword sizes like auto and fit-content. Broadly supported as of 2024; guarded by prefers-reduced-motion since it only matters for animations.
- Rule 9 (
text-wrap: pretty/balance) is progressive enhancement — no effect in older browsers, no downside.
- Rule 10:
#root targets React apps, #__next targets Next.js. Adjust the selector for other frameworks.
1---2name: css-reset3description: Applies a modern CSS reset covering box-sizing, margin removal, text rendering, media defaults, and root stacking context. Use when starting a new web project, creating a global stylesheet, or when the codebase lacks sensible CSS defaults.4---56# css-reset78Include this reset at the top of your global stylesheet for every new web project. Each rule addresses a specific browser default that causes layout or rendering inconsistencies.910```css11/* 1. Use a more-intuitive box-sizing model */12*, *::before, *::after {13 box-sizing: border-box;14}1516/* 2. Remove default margin */17*:not(dialog) {18 margin: 0;19}2021/* 3. Enable keyword animations */22@media (prefers-reduced-motion: no-preference) {23 html {24 interpolate-size: allow-keywords;25 }26}2728body {29 /* 4. Increase line-height */30 line-height: 1.5;31 /* 5. Improve text rendering */32 -webkit-font-smoothing: antialiased;33}3435/* 6. Improve media defaults */36img, picture, video, canvas, svg {37 display: block;38 max-width: 100%;39}4041/* 7. Inherit fonts for form controls */42input, button, textarea, select {43 font: inherit;44}4546/* 8. Avoid text overflows */47p, h1, h2, h3, h4, h5, h6 {48 overflow-wrap: break-word;49}5051/* 9. Improve line wrapping */52p {53 text-wrap: pretty;54}55h1, h2, h3, h4, h5, h6 {56 text-wrap: balance;57}5859/* 10. Create a root stacking context */60#root, #__next {61 isolation: isolate;62}63```6465## Notes6667- Rule 3 (`interpolate-size: allow-keywords`) enables CSS transitions to/from keyword sizes like `auto` and `fit-content`. Broadly supported as of 2024; guarded by `prefers-reduced-motion` since it only matters for animations.68- Rule 9 (`text-wrap: pretty/balance`) is progressive enhancement — no effect in older browsers, no downside.69- Rule 10: `#root` targets React apps, `#__next` targets Next.js. Adjust the selector for other frameworks.
nateslabach