The Evolution of CSS Basics: A Look at Over 20 Years of Practice

Since the early days of the web, developers have sought to control the appearance of HTML elements, often by working around browsers' unpredictable behaviors.

This article explores the evolution of CSS basics, not just a story of technical resets, but a reflection of shifting expectations around how styles are structured. From the desire for total control to a more sustainable, user-centered approach, CSS foundations have matured, and so have we.

I. Why a CSS Base Is Essential: Harmonizing Cross-Browser Rendering

In the early web, each browser applied its own default styles to HTML elements. A simple h1 could appear with different font sizes or margins depending on the browser, resulting in inconsistent and unpredictable page layouts.

To address these disparities, developers introduced the concept of a neutral "CSS base." The goal: remove or standardize browser default styles to start with a clean, stable, and predictable slate. This made it possible to ensure consistent presentation of basic HTML elements, regardless of the browser used.

Thus, the CSS base was born out of a need for consistency, not aesthetics. It represents the first step toward a reliable, controlled user experience by neutralizing browsers’ erratic behavior.

II. Reset CSS: Remove Everything to Control Everything

With the proliferation of browsers in the 2000s, their varying interpretations of HTML styles quickly became a major source of frustration. To address this, the web community introduced the concept of CSS resets: a base stylesheet loaded at the start of a website, designed to neutralize browser default styles and establish a uniform foundation.

1. The Early Days: The Universal Selector and Its Limits

The first resets involved using the * selector to remove all margins and paddings:

* {
    margin: 0;
    padding: 0;
}

Over time, developers added properties like border: 0, font: inherit, and vertical-align: baseline, making these resets even more radical, at the cost of readability, usability, and semantic logic.

* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}

This “Condensed Universal Reset” aimed to neutralize even more styles, but it also removed expected behaviors, like focus outlines for keyboard navigation, raising accessibility concerns. It could also impact performance, especially in browsers of the time, since the universal selector targeted every DOM node indiscriminately.

2. From Tantek Çelik to Yahoo!: Minimalism or Radicalism

In response to the excesses of global resets, Tantek Çelik proposed a much more targeted version as early as 2004, undohtml.css. It removed only problematic styles while preserving useful browser defaults, embracing a "just enough" philosophy.

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.                  */
/* http://creativecommons.org/licenses/by/2.0                     */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */

:link,:visited { text-decoration:none }

ul,ol { list-style:none }

h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

a img,:link img,:visited img { border:none }

address { font-style:normal }

In contrast, in 2006, Yahoo! introduced a strict CSS reset (reset.css) as part of its YUI Library, designed for the needs of complex applications. It neutralized all HTML elements to enforce a fully controlled rendering. While ideal for enterprise-level projects, this approach proved too rigid for more creative or editorial use cases.

These two opposing approaches highlighted a growing need to strike a balance between control and flexibility.

3. 2007, Eric Meyer’s Reset: The First Community Standard

In a landscape dominated by extremes, between Tantek Çelik’s minimalism and Yahoo!’s radical approach, a new proposal emerged in April 2007: Eric Meyer’s CSS reset. A prominent figure in the CSS world and an active W3C contributor, Meyer offered a clear, methodical, and more balanced solution.

His approach was simple: create a neutral, stable base without blindly removing everything. He compiled an exhaustive list of HTML elements and applied targeted rules, while respecting the semantics of the markup. Here is a look at the most well-known version, v2.0, published in 2011:

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;
}

But that’s not all. Meyer also added a set of targeted rules to handle specific behaviors:

/* 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;
}

This thoughtful approach resonated with the community. Eric Meyer’s reset quickly became a de facto standard, integrated into many frameworks like Blueprint, the 960 Grid System, and later Bootstrap. It found its way into CMS platforms, static site generators, and front-end boilerplates. In short, it became the go-to starting point for any professional web project.

4. A Decade of CSS Resets: Between Experimentation and Maturity

Throughout the 2000s, the front-end community slowly but surely refined its understanding of the CSS reset concept. What began as a radical operation, removing all of the browsers’ native styles, gradually evolved into a more nuanced and thoughtful approach.

Key figures like Tantek Çelik, Eric Meyer, and the Yahoo! YUI team marked the first major milestones in this evolution. But they weren’t alone. Many developers and collectives proposed their own variations of resets, each with its own flavor. Among these lesser-known but equally notable alternatives were:

• Shaun Inman’s Global Reset
• The Poor Man’s Reset – minimalist and pragmatic
• The Siolon Global Reset – typography-focused
• The Tripoli Reset – which foreshadowed a broader normalization logic

All of these resets shared the same goal: to reduce inconsistencies across browsers. This diversity reflects a growing maturity. The CSS reset was no longer a universal eraser, but a thoughtful starting framework, adaptable to the needs of each project.

III. normalize.css: Toward a New Philosophy

After several years dominated by radical CSS resets, the front-end community began to take a step back. Systematically removing all native browser styles was no longer seen as the obvious solution. In fact, this strategy could prove costly, even counterproductive. It was in this context of collective maturity that a new proposal emerged in 2011: normalize.css.

1. A Major Turning Point in the History of CSS Foundations

Proposed by Nicolas Gallagher and Jonathan Neal, normalize.css doesn’t aim to reset everything to zero. It’s no longer a "reset" in the strict sense, but a tool for targeted normalization. Its goal: to harmonize native browser styles without erasing what already works well.

This idea marked a true paradigm shift. Instead of neutralizing all default behaviors, normalize.css introduced a more respectful and intelligent CSS base, built on a detailed analysis of inconsistencies across browsers like Chrome, Firefox, Safari, and Internet Explorer.

2. A New Philosophy: Collaborating with the Browser

The strength of normalize.css lies in its subtle philosophy. Whereas traditional resets viewed the browser as something to work around, normalize.css instead treats it as a partner.

HTML is not neutral, it carries semantics and behaviors designed for readability, structure, and accessibility. An h1 is not just bold text; it's a hierarchical marker that plays a role in SEO, assistive technologies, and visual consistency. The same goes for paragraphs, lists, and acronym tags.

By blindly removing these styles, classic resets forced developers to rebuild what browsers already did well. In contrast, normalize.css chooses to preserve useful native behaviors while fixing actual inconsistencies between browsers.

3. A Model of Organization: Readability, Comments, Precision

Another major innovation of normalize.css is its clear and well-documented structure. Each block of rules is preceded by a detailed, often numbered comment explaining the purpose of the rule, historical context, or a specific bug it addresses.

This approach transforms the CSS file into an educational tool. It’s not just a series of selectors, but a true technical journal, where every line has a purpose, a rationale, and historical significance.

Excerpt from version 1.0.0:

/* ==========================================================================
Links
========================================================================== */

/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
    outline: thin dotted;
}

/*
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
    outline: 0;
}

And another example, for embedded content:

/* ==========================================================================
Embedded content
========================================================================== */

/*
* 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7.
*/
img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

This clarity makes normalize.css a model of readability and maintainability, a stark contrast to the “raw” resets of the early 2000s.

4. Widespread and Rapid Adoption

Upon its release, normalize.css saw immediate success. It was quickly integrated into HTML5 Boilerplate, a highly popular template used as a starting point for thousands of web projects. It was also adopted by frameworks, static site generators, component systems, and featured in many best practices guides.

This adoption can be attributed to several factors:

• It works reliably, without unexpected side effects,
• It preserves useful browser behaviors, whereas resets often forced developers to restyle everything from scratch,
• It aligns with modern concerns around accessibility, performance, typographic clarity, and user experience.

With normalize.css, the CSS base became more solid, less arbitrary, and better suited to the real needs of the modern web.

5. A Living Project, in Step with Browser Evolution

Unlike frozen-in-time CSS resets, normalize.css is a living project, regularly updated. As browsers fix inconsistencies or adopt unified standards, some rules become obsolete and are removed.

This ongoing maintenance cycle makes normalize.css a mirror of the web’s evolution. It tracks the progress of native rendering, incorporates community feedback, and adapts to changes in rendering engines. It even inspired other projects in the same spirit, such as sanitize.css, modern-normalize, and CSS bases embedded in professional design systems.

6. A Thoughtful End, True to Its Legacy

In 2023, Nicolas Gallagher announced the end of active maintenance for normalize.css. In a note published on GitHub, he explained that the project had fulfilled its mission: thanks to improvements in modern rendering engines, many fixes were no longer necessary. Native CSS rendering had matured to the point that normalize.css was no longer as critical.

He also noted that modern front-end projects often rely on design systems or integrated CSS libraries that come with their own normalization strategies. In this new context, maintaining a single, universal base CSS file no longer makes as much sense.

The repository remains available, free to reuse or fork. But its dormancy marks the end of an era, when front-end development needed a universal compatibility file to ensure a consistent CSS foundation across browsers.

7. A Historic Milestone for Modern CSS

normalize.css didn’t just change the way we structure CSS foundations, it embodied a new front-end development ethic. One rooted in respect for native behavior, pragmatism, clear documentation, and lasting consistency.

It enabled a whole generation of developers to build interfaces on solid, understandable, and durable foundations. And even if it no longer evolves, its influence remains visible in every modern framework, starter kit, and design system.

With it, the destructive reset gave way to a thoughtful collaboration with the browser, and the web was never the same again.

IV. A Modern CSS Base: From Compatibility to User Experience

1. Two Decades of Transformation

Over the past 20+ years, CSS bases have gone through two major phases:

• A period of radical resets, aiming to wipe out all browser default styles to create a neutral starting point.
• Then a period of normalization, initiated by normalize.css, focused on consistency without sacrificing useful native behaviors.

These practices shaped front-end projects for years, bringing stability and predictability to rendering despite browser inconsistencies.

But today, modern engines (Blink, WebKit, Gecko) offer increasingly consistent behavior. Radical resets are no longer essential, historic bugs have been resolved, and inconsistencies are now rare.

2. A Hybrid Base: Between Legacy and New Needs

Today’s CSS bases are neither fully neutral nor fully styled. They often combine:

• Classic resets from earlier approaches,
• Rules inspired by normalize.css,
• And subtle UX enhancements, such as:
  • Respecting user preferences,
  • Readable default typography,
  • Visible focus styles.

This patchwork has become a de facto standard, but it’s rarely documented or unified. Each team creates its own "base," leading to growing fragmentation.

3. From a Neutral Base to an Ergonomic Foundation

For a long time, a CSS base was meant to be invisible. It wasn’t supposed to style or suggest any visual intent, just "clean up" the interface.

But this minimalism often led to the opposite effect:

• Interfaces with no hierarchy, contrast, or visual cues,
• Headings that looked like paragraphs, invisible buttons, unclear navigation.

Today, expectations have changed, a CSS base should ensure immediate usability, even before any design is applied. This means:

• Clearly distinct headings,
• Readable form elements,
• Recognizable buttons,
• Visible focus indicators.

The CSS base thus becomes an ergonomic foundation, almost a mini design system, that structures the interface before design work begins.

4. Accessibility: A Responsibility from the Ground Up

Many historical CSS bases weakened accessibility, often unintentionally, by:

• Removing focus outlines,
• Overriding typographic hierarchy,
• Stripping quotation marks from citations,
• Ignoring user preferences.

Today, such oversights are no longer acceptable. A modern CSS base must:

• Preserve focus styles (using :focus-visible or similar),
• Maintain a logical typographic structure (headings, paragraphs, lists),
• Replace removed styles with accessible alternatives,
• Respect user preferences via appropriate media queries.

Accessibility is no longer an optional layer, it’s a foundational design criterion.

5. Functional Aesthetics, Not Imposed Design

For years, styling elements in a CSS base was frowned upon, it wasn’t seen as “neutral.” But this opposition between neutrality and usefulness is now outdated.

Minimal functional aesthetics can significantly improve the experience:

• line-height: 1.5 for readability,
• max-width on paragraphs to avoid overly long lines,
• cursor: pointer on clickable elements,
• Soft transitions on :hover or :focus states.

This isn't about enforcing a design, it's about offering a clean, healthy starting point that can easily be built upon or overridden.

6. A CSS Base Centered on Use

In 2025, the expectation for a CSS base is simple: Is the interface already usable before any design is added? If not, then the base hasn’t done its job.

Today’s bases are no longer just neutral, they take on an ergonomic role. They are part of the experience. They integrate design system logic. They anticipate real-world usage. They don’t shine, but they provide strength.

A modern CSS base is no longer just a compatibility tool. It’s a subtle ergonomic foundation that makes the interface reliable, readable, and accessible, even with no styles added. It doesn’t stand out, but it makes a difference.