CSS Reset: The best tool to normalize your CSS for Modern Development

What is CSS Reset?

CSS reset is a technique that consists of resetting certain HTML elements to zero values to avoid some of the display differences across various browsers. The goal is to reduce browser inconsistencies in things like default line heights, margins, and font sizes of headings, creating a uniform starting point for styling.

Before diving deeper, it's important to note that the usage of this technique is controversial. If you choose to use it, it's recommended to use an evolved CSS Reset, like the one proposed by Eric Meyer, and avoid using the universal selector (`*`).

The Evolution of CSS Reset

The Classic Reset CSS (Not Recommended)

Browsers don't always use the same default margins and padding for different HTML elements. This can represent a problem when you want to remove the left indent of a list with `margin-left: 0;` and some browsers keep this indent because they use padding rather than margin.

The classic approach was to remove all margins and internal indents from elements:

* {
    margin: 0;
    padding: 0;
}

To go further and eliminate other differences by resetting everything "to zero", developers would use:

/* This is an example of non-recommended practice,
   DO NOT USE in your projects! */
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: sans-serif;
    font-size: 1em;
    font-weight: normal;
    font-style: normal;
    text-decoration: none; 
}

Problems with the Classic Approach

The problem with this technique is that it cancels out some default browser styles that are actually useful. The most obvious case is that of form elements.

By default, and with most browsers, these take on the appearance of the operating system's control elements (text fields, dropdown lists, buttons, etc.). Since these styles are known and easily identifiable by users, and since it's very difficult or even impossible to style certain form elements to your liking, it's recommended to keep this default appearance.

However, the universal selector `*` has the advantage as well as the disadvantage of selecting all HTML elements indiscriminately. And if you use a `border: 0;`, you'll lose most of the "system" styles of form elements.

Additionally, using the universal selector consumes browser resources as it must traverse all elements in the document to apply this style.

Eric Meyer's Reset CSS

Eric Meyer's Reset CSS is one of the most famous and widely adopted resets. It's intentionally very generic and serves as a starting point rather than a self-contained solution. The reset styles given are designed to reduce browser inconsistencies in default line heights, margins, and font sizes of headings.

Here's the complete Eric Meyer Reset CSS (v2.0 | 20110126):

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

Modern CSS Reset Approaches

Josh W. Comeau's Modern CSS Reset

Josh W. Comeau has developed a modern CSS reset that addresses contemporary needs and includes all the little tricks to improve both user experience and CSS authoring experience. This reset is unopinionated when it comes to design and cosmetics, making it suitable for any project.

Here are the key components of his modern 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;
}

/* 10. Root stacking context */
#root, #__next {
  isolation: isolate;
}

Andy Bell's Modern CSS Reset

Andy Bell's approach focuses on creating a more balanced and accessible reset that preserves useful defaults while correcting inconsistencies. His reset includes several modern considerations:

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

/* Remove default margin */
* {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Remove list styles on ul, ol elements with a list role */
ul[role='list'], ol[role='list'] {
  list-style: none;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4, button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2, h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img, picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

Key Components of a Modern CSS Reset

1. Box-Sizing Model

Setting all elements to `box-sizing: border-box` ensures that padding and borders are included within the element's total width and height, simplifying layout calculations.

2. Margin and Padding Reset

Removing default margins and paddings from elements provides a clean slate for custom spacing without browser inconsistencies.

3. Font Smoothing and Line Height

Setting consistent line height and enabling font smoothing enhances text readability across devices and browsers.

4. Media Element Defaults

Ensuring that images, videos, and other media elements are responsive and don't exceed their container's width.

5. Form Element Inheritance

Making form controls inherit fonts and styles ensures they blend seamlessly with the rest of the design.

6. Accessibility Enhancements

Including styles that improve accessibility, such as ensuring focus outlines are visible and providing better text wrapping for readability.

The Ultimate Modern CSS Reset

Based on insights from all the modern resets we've explored, here's a comprehensive CSS reset that combines the best practices from Eric Meyer, Josh W. Comeau, Andy Bell, and other modern approaches:

/* ===============================================
   Ultimate Modern CSS Reset
   Based on best practices from Eric Meyer, 
   Josh W. Comeau, Andy Bell, and modern standards
   =============================================== */

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin and padding */
* {
  margin: 0;
  padding: 0;
}

/* 3. Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 4. Remove list styles on ul, ol elements with a list role */
ul[role='list'], ol[role='list'] {
  list-style: none;
}

/* 5. Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4, button, input, label {
  line-height: 1.1;
}

/* 6. Balance text wrapping on headings */
h1, h2, h3, h4 {
  text-wrap: balance;
}

/* 7. Improve text rendering and wrapping */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

/* 8. A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* 9. Make images and media easier to work with */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 10. Inherit fonts for inputs and buttons */
input, button, textarea, select {
  font: inherit;
}

/* 11. Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* 12. Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/* 13. Root stacking context */
#root, #__next {
  isolation: isolate;
}

/* 14. Enable keyword animations for modern browsers */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

/* 15. HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* 16. Remove quotes from blockquotes and q elements */
blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* 17. Table border collapse */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 18. Focus management for accessibility */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* 19. Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

Limitations and Considerations

While CSS resets are powerful tools, they come with some limitations and considerations:

Potential Issues

• Loss of semantic meaning: Resetting all styles can make content less readable without custom styling
• Form element styling: Some resets can interfere with native form element appearance
• Performance impact: Universal selectors can impact performance on large documents
• Maintenance overhead: You need to redefine styles for every element you use

Best Practices

• Use modern, well-maintained resets rather than creating your own from scratch
• Test thoroughly across different browsers and devices
• Consider using Normalize.css as an alternative to traditional resets
• Be mindful of accessibility when applying resets
• Document your reset choices for team consistency

Axentix and Normalized CSS

Axentix is a modern front-end framework that provides a normalized CSS foundation out of the box. Instead of requiring developers to implement their own CSS reset, Axentix includes a carefully crafted normalization system that:

• Eliminates browser inconsistencies: Provides a consistent baseline across all modern browsers
• Preserves useful defaults: Maintains semantic meaning while correcting inconsistencies
• Optimizes performance: Uses efficient selectors and modern CSS techniques
• Ensures accessibility: Includes accessibility-focused defaults and behaviors
• Supports modern features: Incorporates contemporary CSS properties and best practices

By using Axentix, developers can focus on building their applications without worrying about cross-browser compatibility issues or implementing their own reset. The framework handles all the normalization work, providing a solid foundation that works consistently across different browsers and devices.

This approach is particularly beneficial for teams that want to maintain consistency across projects while reducing the overhead of managing custom CSS resets. Axentix's normalized CSS ensures that your components will look and behave consistently, regardless of the browser or device your users are on.

Conclusion

CSS reset techniques have evolved significantly from the early universal selector approaches to modern, thoughtful implementations that balance consistency with usability. While the classic reset approaches had their place in web development history, modern resets like those from Josh W. Comeau and Andy Bell provide better solutions that consider accessibility, performance, and user experience.

The ultimate modern CSS reset we've presented combines the best practices from various sources, providing a solid foundation for any web project. However, for many developers, using a framework like Axentix that includes normalized CSS can be a more practical solution, eliminating the need to manage reset styles while ensuring consistent cross-browser behavior.

Whether you choose to implement your own reset or use a framework like Axentix, the key is to understand the principles behind CSS normalization and make informed decisions based on your project's specific needs and constraints.