CSS Reset Research

Week 7 – DESN 368

Why Reset at All?

Browsers ship with different default CSS rules called user-agent styles. These defaults are not consistent across Chrome, Safari, Firefox, and Edge.

Resets solve these problems:

  • Different margin/padding defaults
  • Different line-heights and font sizes
  • Different list indentation logic
  • Inconsistent form behavior

A reset creates a consistent starting point so your design system looks the same everywhere.

Meyer Reset vs Josh Comeau Reset

Why Use Josh's Version Over Meyer's?

  1. Modern browsers are more consistent now.
    Meyer (2007) erases EVERYTHING. Josh only resets what still causes problems today.
  2. Josh respects semantic HTML.
    Meyer wipes italics, bold, and list bullets. Josh keeps them — better for readability.
  3. Josh solves modern issues Meyer never had to consider:
    • Responsive media (`max-width:100%`)
    • Form controls inherit fonts
    • Better line wrapping
    • JS framework stacking context

How Do You Use These?

You can add a Reset or Normalize.css to your project in three ways:

1. Link tag

<link rel="stylesheet" href="reset.css">

2. Import

@import url("reset.css");

3. Paste at the top of your stylesheet

/* Reset goes here */

What Is a CSS Boilerplate?

A reset removes browser defaults.
A boilerplate adds your own base styling on top.

Boilerplates help when:

  • You want reusable patterns
  • Your site uses consistent spacing
  • You need utility classes

Boilerplates hurt when:

  • They're too opinionated
  • You fight them constantly
  • Your project is small

Why Normalize.css Is Different

Normalize doesn't wipe styles — it standardizes them across browsers.

Reset vs Normalize:

  • Reset: Remove everything.
  • Normalize: Keep useful defaults and fix inconsistencies.

Normalize keeps heading sizes, bullets, and semantic styles like italics.

My Notes

Resets help make my layouts consistent across browsers. Meyer’s reset is older and removes too much. Josh Comeau’s reset feels modern, practical, and perfect for class projects.

Sources

↑ Back to Top