Notes on Josh Comeau's Custom CSS Reset

Recently, we discussed Elad Shechter's new CSS reset, closely followed by Josh Comeau's insightful blog post on the subject. This marks a shift in the CSS reset landscape. The significant browser styling differences of the past are less prevalent, and often, by the time a project's styling is underway, many default styles are overridden anyway. Therefore, "modern" CSS resets are evolving into curated collections of default styles offering practical benefits for new projects.

Examining Josh's approach, it appears to be precisely that: a compilation of styles that aren't inherently design-driven, but rather support design by providing commonly desired project features. Let's analyze his choices with some commentary.

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

A widely accepted practice. While its utility might be slightly diminished with the increased use of Grid and Flexbox layouts, it remains a preferred approach for consistent sizing. Ideally, a CSS reset should leverage inheritance for easier overrides at the component level.

* {
  margin: 0;
}

A concise way to eliminate default margins. While potentially heavy-handed in some situations, it enforces explicit margin declarations, improving clarity. Pairing this with padding: 0; would address default list item padding.

html, body {
  height: 100%;
}

A useful strategy to ensure percentage-based heights function correctly, preventing unexpected background behavior. While body { height: 100vh; } might seem sufficient, it lacks the same reliability, possibly due to iOS Safari quirks.

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

The -webkit-font-smoothing property can lead to excessively thin typography. While a valuable tool, global application isn't always ideal. Managing global typographic sizing via the html selector, adjusting the root font-size with media queries, provides more control. A line-height of 1.5 is a reasonable default, although a value closer to 1.4 might be preferred by some. However, heading adjustments are frequently needed. Josh's clever alternative:

* {
  line-height: calc(1em   0.5rem);
}

This dynamically adjusts line-height based on font size, offering a scalable solution. This technique, inspired by Jesús Ricarte's work on optimal line-height calculation, is worth exploring.

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

A solid inclusion. display: block; eliminates line-height issues, and max-width: 100%; prevents media elements from overflowing their containers. While the inclusion of <picture></picture> is debatable, adding <iframe></iframe> and <object></object> would enhance completeness.

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

Essential for preventing long words (like URLs) from disrupting layouts. Applying this to a broader selector like .text-content allows for cascading, but targeting specific elements is acceptable. Consider adding <li>, <dl></dl>, <dt></dt>, and <blockquote></blockquote> for comprehensive line wrapping. The optimal combination of line-wrapping properties remains a subject of ongoing discussion.

#root, #__next {
  isolation: isolate;
}

This React/Next.js specific snippet creates a stacking context. While its precise benefit isn't immediately apparent, it doesn't introduce obvious problems.

Overall, Josh's reset is a well-considered approach. It's always beneficial to examine and compare different CSS reset strategies.

The above is the detailed content of Notes on Josh Comeau's Custom CSS Reset. For more information, please follow other related articles on the PHP Chinese website!