Notes on Josh Comeau's Custom CSS Reset

Why Modern CSS Resets Matter

CSS resets have evolved significantly over the years. While traditional resets like Eric Meyer's focused on normalizing browser differences, Josh Comeau's modern approach takes a different stance--it's less about removing defaults and more about establishing smart defaults that improve both the user experience and developer experience.

Unlike the classic "blank slate" approach, this reset acknowledges that browsers have largely converged on sensible defaults. The focus shifts to making adjustments that reduce repetitive code and prevent common layout frustrations.

For developers looking to master modern CSS techniques, understanding these foundational rules is essential. Combined with advanced CSS effects and CSS animations, these resets form the foundation of professional web development.

1. Box-Sizing Model

The border-box model changes how CSS calculates element dimensions. By default, CSS uses content-box where width and height apply only to content, with padding and border added on top. Border-box includes padding and border within the specified dimensions, making layout calculations significantly more intuitive.

Why This Matters

.element {
 width: 200px;
 padding: 20px;
 border: 2px solid black;
}

With content-box: The element renders at 244px wide (200 + 40 + 4)

With border-box: The element renders at exactly 200px wide, with content area shrinking to accommodate padding and border

This is a must-have rule that makes CSS significantly nicer to work with, especially when building responsive layouts with percentage-based widths.

According to MDN's documentation on box-sizing, this property is fundamental to predictable layout behavior and is widely adopted across modern web development.

Understanding the box model is foundational to effective CSS layout design and prevents common layout bugs.

2. Remove Default Margin

*:not(dialog) {
 margin: 0;
}

Elements like paragraphs and headings come with default margins designed for unstyled documents. While sensible for plain HTML, these margins interfere with intentional design systems.

The exception for dialog elements preserves the browser's built-in centering behavior, which is useful for modal dialogs that should be centered in the viewport.

What This Changes

• Margins become a deliberate design choice, not a browser default
• Spacing is consistent across your design system
• No unexpected gaps between elements

When You Might Keep Margins

For rapid prototyping or content-heavy pages where browser defaults provide acceptable spacing, you may want to be more selective about which elements have margins reset. The key is making spacing intentional rather than accidental.

This approach pairs well with CSS cache busting strategies when maintaining consistent styling across production deployments.

3. Enable Keyword Animations

@media (prefers-reduced-motion: no-preference) {
 html {
 interpolate-size: allow-keywords;
 }
}

This modern CSS feature is transformative for interactive components. It enables animating between absolute values (like 0px) and keyword values (like auto or fit-content).

The interpolate-size property, documented on MDN, opens up possibilities that previously required JavaScript solutions.

Before: JavaScript Required

/* This wouldn't work */
.accordion {
 height: 0;
 transition: height 0.3s ease;
}
.accordion.open {
 height: auto; /* No transition possible */
}

After: Pure CSS Animations

.accordion {
 height: 0;
 transition: height 0.3s ease;
}
.accordion.open {
 height: auto; /* Now animates smoothly! */
}

Wrapped in prefers-reduced-motion: no-preference, this respects users who experience discomfort with motion while enabling smooth animations for everyone else. This is particularly valuable for building accessible web applications that prioritize user comfort.

For more advanced animation techniques, explore our guide on delaying keyframe animations.

4-5. Typography Improvements

Accessible Line-Height

body {
 line-height: 1.5;
}

A line-height of 1.5 provides comfortable readability for body text--more generous than most browser defaults. The unitless value scales proportionally with font size, ensuring consistent spacing regardless of the base font size.

Font Smoothing

body {
 -webkit-font-smoothing: antialiased;
}

This property improves text appearance on macOS by using font smoothing, making fonts appear thinner and more refined. It's particularly noticeable with heavier font weights or dark backgrounds where subpixel rendering can make text appear bold or fuzzy.

Note: This is a WebKit/Blink-specific property. For Firefox, use -moz-osx-font-smoothing: grayscale to achieve similar effects. These typography improvements contribute to a more polished, professional appearance for your website.

These typography enhancements work together with other CSS effects to create visually stunning web experiences.

6. Improve Media Defaults

img, picture, video, canvas, svg {
 display: block;
 max-width: 100%;
}

Why Block Display?

Inline elements like images sit on the text baseline, leaving a small gap beneath for descenders (like the tail on 'g' or 'y'). Setting display: block removes this gap entirely, preventing unexpected whitespace in your layouts.

Why max-width: 100%?

This ensures media elements never overflow their containers, making them naturally responsive without additional media queries. No overflow means no horizontal scroll, which is essential for maintaining smooth user experiences across all device sizes.

Additional Elements to Consider

/* Often useful additions */
iframe, object, embed {
 max-width: 100%;
}

These rules prevent embedded content from breaking responsive layouts, especially important when embedding third-party content like YouTube videos or Google Maps.

7. Inherit Fonts for Form Controls

input, button, textarea, select {
 font: inherit;
}

Form controls often use system fonts that don't match your design. This rule ensures they inherit the font family, size, weight, and style from their parent, creating visual consistency across your entire application.

What "font: inherit" Includes

• font-family
• font-size
• font-weight
• font-style
• font-stretch
• font-variant
• line-height

When You Might NOT Want This

• Native-looking form controls for accessibility familiarity: Some users prefer familiar system-styled controls
• Complex form controls where system styling provides better UX: Select dropdowns and checkboxes may benefit from native appearance
• Legacy applications with form-specific stylesheets: Existing form stylesheets may need adjustment

For custom web application development, consistent typography across forms enhances the professional appearance and user trust.

8. Avoid Text Overflows

p, h1, h2, h3, h4, h5, h6 {
 overflow-wrap: break-word;
}

Long words, URLs, or technical terms can break layouts by extending beyond container boundaries. This property ensures text wraps to fit within its container, preventing horizontal scrolling and layout breakage.

overflow-wrap vs word-break

Additional Elements That Often Need This

li, dd, blockquote, code, pre {
 overflow-wrap: break-word;
}

Code snippets and long URLs are common culprits for text overflow issues, making this rule essential for technical blogs and documentation sites.

9. Improve Line Wrapping

p {
 text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
 text-wrap: balance;
}

text-wrap: pretty

Optimizes paragraph layout for readability. It may:

• Adjust line breaks for better word distribution
• Prevent orphaned words on their own lines
• Create more visually pleasing paragraph shapes

text-wrap: balance

Distributes text more evenly across lines for headings. This creates visually balanced headlines where no single line is dramatically shorter or longer than others, improving the overall typographic quality of your content.

Browser Support

These properties are newer but gaining support across modern browsers. The graceful degradation means headings simply use regular wrapping in unsupported browsers, so there's no downside to adopting these properties today. Check caniuse.com for current browser compatibility updates.

These typography enhancements complement other CSS techniques for professional-quality web design.

10. Root Stacking Context

#root, #__next {
 isolation: isolate;
}

The isolation property creates a new stacking context. This is crucial for React and Next.js applications where the app mounts to #root or #__next.

Why This Matters

When using React Portals to render modals, dropdowns, or tooltips as direct children of <body>, they need to render above everything else in your app. A stacking context at the root ensures that z-index values within your app don't conflict with elements outside it.

What It Does

/* Creates a new stacking context */
isolation: isolate;

/* Equivalent to */
position: relative; /* or z-index: 0 */

The #__next Selector

This specifically targets Next.js applications. If using Create React App or another framework, adjust accordingly (#root for CRA, your app's mount point for others). This is essential for building modern web applications with proper modal and overlay layering.

Comparison with Other Resets

Traditional vs. Modern Approach

Andy Bell's Modern Reset

Andy Bell's reset shares many concepts but includes additional rules:

• min-height: 100vh on body
• List style reset for accessibility
• Focus outline preservation

Both approaches are valid--choose based on your project's needs or combine the best of both. As noted in the CSS-Tricks analysis of Comeau's reset, this modern approach reflects how CSS development has evolved with better browser standardization.

Implementation Guide

Next.js (App Router)

Create src/app/globals.css and add the reset at the top:

/* src/app/globals.css */
/* Josh Comeau's CSS Reset */
*, *::before, *::after {
 box-sizing: border-box;
}

/* ... rest of reset rules ... */

/* Your custom styles below */

Next.js (Pages Router)

Import in pages/_app.js:

import '../styles/reset.css';

function MyApp({ Component, pageProps }) {
 return <Component {...pageProps} />;
}

export default MyApp;

Vite / CRA

Import in src/index.css or src/App.css:

@import './reset.css';

/* Rest of your styles */

Customization Tips

1. Test incrementally: Apply rules one at a time to identify issues early
2. Document changes: Note any customizations for your team to maintain consistency
3. Review periodically: Update as browser support evolves and new CSS features become available

For professional web development services, having a solid CSS foundation like this reset ensures consistent, predictable styling across your project.