Modern CSS ResetStart Your Projects Right

1. Box Sizing Reset

We use box-sizing: border-box on all elements and pseudo-elements to create a more intuitive sizing model. This ensures padding and borders are included in element widths, making layouts more predictable.

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

2. Margin Reset

Removes all default margins from elements. This gives you complete control over spacing in your layouts, preventing unexpected gaps and inconsistencies.

* {
  margin: 0;
}

3. Body Defaults

Sets optimal defaults for the body element:

• Improved text rendering with font smoothing
• Smooth scrolling behavior
• System font stack for optimal performance
• Accessible line height
• Base colors for text and background

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #fff;
  color: #333;
}

4. Media Element Improvements

Ensures media elements (images, videos, etc.) are responsive by default and won't overflow their containers. The height: auto maintains aspect ratios.

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

5 & 8. Form Elements

Normalizes form controls to inherit font properties and removes default styling, making them easier to style consistently across browsers.

input, button, textarea, select {
  font: inherit;
  border: none;
  outline: none;
}

6. Button Reset

Removes default button styles while maintaining usability. The cursor pointer provides better UX by indicating clickable elements.

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

7. Link Reset

Removes default underlines and colors from links, allowing for custom styling while maintaining semantic HTML.

a {
  text-decoration: none;
  color: inherit;
}

9. Text Overflow Prevention

Prevents text from overflowing its container by enabling word wrapping on text elements.

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

10. Line Wrapping Improvements

Uses modern CSS properties to improve text wrapping for better readability.

p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  font-weight: bold;
  line-height: 1.2;
}

11. Root Stacking Context

Creates a new stacking context at the root level to prevent z-index issues.

#root, #__next {
  isolation: isolate;
}

12. List Reset

Removes default list styles and padding, giving you full control over list styling.

ul, ol {
  list-style: none;
  padding: 0;
}

13. Table Normalization

Sets consistent table styles with collapsed borders and full width by default.

table {
  border-collapse: collapse;
  width: 100%;
}

14. Iframe Defaults

Ensures embedded content is responsive and removes default borders.

iframe {
  border: 0;
  display: block;
  width: 100%;
}

15. Focus Visibility

Improves focus visibility for keyboard navigation while maintaining a clean aesthetic.

:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}