Skip to content

Instantly share code, notes, and snippets.

@ergomancer
Last active July 1, 2025 06:10
Show Gist options
  • Select an option

  • Save ergomancer/b7a9ab2c5d05278a03f963c86ff36dc2 to your computer and use it in GitHub Desktop.

Select an option

Save ergomancer/b7a9ab2c5d05278a03f963c86ff36dc2 to your computer and use it in GitHub Desktop.
A CSS reset off Josh Cameau's blog.
/*
CSS Reset inspired from Josh's version at
https://www.joshwcomeau.com/css/custom-css-reset/
*/
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 2. Remove default margin */
* {
margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
html {
interpolate-size: allow-keywords;
}
}
body {
/* 4. Add accessible 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;
}
#root,
#__next {
/* 10. Create a root stacking context */
isolation: isolate;
/* 11. Set-up for light/dark color scheme support */
color-scheme: light dark;
/* 12. Block creation of font variation if not provided in the font set */
font-synthesis: none;
}
/* 13. Opt-in for customizable select */
select,
::picker(select) {
appearance: base-select;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment