An Interview With Elad Shechter on 'The New CSS Reset'

This interview explores Elad Shechter's innovative CSS reset project, "the-new-css-reset," a modern approach leveraging cutting-edge CSS features. Instead of simply presenting the code, we delve into the why behind its creation and the intricacies of its functionality.

The complete reset code is:

/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/

/* Remove all styles except 'display' */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}

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

/* Remove list styles */
ol, ul {
  list-style: none;
}

/* Prevent images from exceeding container */
img {
  max-width: 100%;
}

/* Collapse table borders */
table {
  border-collapse: collapse;
}

/* Revert 'white-space' for Safari textareas */
textarea {
  white-space: revert;
}

Elad explains the need for a new reset, highlighting that existing resets rely on older CSS features. His approach leverages newer capabilities for a more efficient and valid reset. He contrasts his approach with Normalize.css (a gentler approach focusing on fixing browser inconsistencies) and Eric Meyer's CSS Reset (a more aggressive approach removing most default styles). Elad advocates using both Normalize.css and a hard reset, combining their strengths.

The core of the new reset lies in all: unset;. This powerful property resets all inherited properties to inherit and non-inherited properties to initial, effectively removing default browser styles. However, display is an exception. all: unset; sets display to inline which is undesirable. Therefore, display: revert; is used to restore the browser's default display value for each element, ensuring proper layout. The revert keyword intelligently retrieves the user-agent stylesheet's default display value if available, otherwise falling back to unset behavior.

The selector *:where(:not(iframe, canvas, img, svg, video):not(svg *)) targets nearly all elements, excluding those (like <iframe></iframe>, <canvas></canvas>, etc.) whose dimensions are best controlled via attributes rather than CSS reset, preventing unintended consequences. The :where() pseudo-class minimizes specificity, avoiding conflicts with project-specific styles. A separate :not(svg *) exclusion protects SVG elements' integrity.

The reset also includes opinionated styles like box-sizing: border-box, which, while not a browser inconsistency, is widely adopted as best practice. The removal of list styles (list-style: none;) is justified by the common use of lists for navigation where markers are unnecessary, despite the semantic implications.

Elad discusses future potential additions, driven by recurring needs in his projects. The max-width: 100%; rule for images is presented as a likely candidate. He also speculates on the impact of the upcoming Cascade Layers module, suggesting it could eliminate the need for specificity-reducing techniques like :where() by providing a layered approach to style overriding. This would allow for a cleaner separation of reset styles from project-specific styles.

The above is the detailed content of An Interview With Elad Shechter on 'The New CSS Reset'. For more information, please follow other related articles on the PHP Chinese website!