{"id":789,"date":"2026-03-14T07:17:24","date_gmt":"2026-03-14T07:17:24","guid":{"rendered":"https:\/\/www.cssportal.com\/blog\/?p=789"},"modified":"2026-03-14T07:17:24","modified_gmt":"2026-03-14T07:17:24","slug":"modern-css-reset-do-you-still-need-one","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/modern-css-reset-do-you-still-need-one\/","title":{"rendered":"Modern CSS Reset \u2013 Do You Still Need One?"},"content":{"rendered":"<style>:root{--ink:#0a192f;--paper:#f0f4f8;--cream:#e1e8ed;--rust:#005bb5;--gold:#5bc0de;--muted:#627d98;--rule:#bcccdc}.byline{font-family:monospace;font-size:.72rem;color:var(--muted);letter-spacing:.15em;padding-bottom:2rem}.byline span{color:var(--gold)}blockquote{border-left:none;background:var(--cream);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);padding:1.5rem 2rem;margin:2.5rem 0;font-style:italic;font-size:1.1rem;color:var(--muted);position:relative}blockquote::before{content:'\\201C';font-family:'Playfair Display',serif;font-size:4rem;color:var(--gold);opacity:.4;position:absolute;top:-.5rem;left:.75rem;line-height:1}.verdict{background:var(--paper);padding:2.5rem;margin:3rem 0;position:relative}.verdict-label{font-family:monospace;font-size:.85rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.75rem}.verdict h2{color:var(--ink);font-size:1.4rem;margin-top:0;padding-left:0}.verdict h2::before{background:var(--gold)}.verdict p{color:var(--ink);margin-bottom:0}.compare{width:100%;border-collapse:collapse;margin:2rem 0;font-size:.9rem}.compare th{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);text-align:left;padding:.6rem .8rem;border-bottom:2px solid var(--rule)}.compare td{padding:.7rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}.compare tr:hover td{background:var(--cream)}.compare .yes{color:#4a7c59;font-weight:600}.compare .no{color:var(--rust)}<\/style>\n<p>For years, a CSS reset was the first thing pasted into every new stylesheet. Eric Meyer&#8217;s reset. Normalize.css. The &#8220;* { margin: 0; padding: 0 }&#8221; trick. They were almost ritual &#8211; a ward against the chaos of browser inconsistency. But the web has changed dramatically. So has CSS itself. The question is no longer <em>which<\/em> reset to use, but whether you need one at all.<\/p>\n<p>Browser vendors have quietly, steadily converged. The era of IE6 quirks and the great Firefox-vs-Safari box model wars is firmly behind us. Yet the CSS reset persists, passed down through boilerplates and starter kits like inherited furniture &#8211; useful once, perhaps, but worth examining before you carry it into your next project.<\/p>\n<h3 class=\"highlight\">A Brief History of Browser Chaos<\/h3>\n<p>The original problem was simple: every browser shipped with its own default stylesheet. Headings got different margins. Unordered lists had inconsistent padding. Form elements behaved like they came from separate planets. The only rational response was to zero everything out and start from scratch.<\/p>\n<p>Eric Meyer&#8217;s 2007 reset took the nuclear option &#8211; stripping every element back to a blank slate. It was effective. It was also brutal: you had to rebuild <em>every<\/em> default style yourself. Normalize.css, which arrived around 2011, took a more surgical approach: preserve useful defaults, only fix what was actually broken across browsers. It was a paradigm shift in how we thought about resets.<\/p>\n<blockquote><p>The goal was never to fight browsers. It was to make them agree with each other. Today, largely, they do.<\/p><\/blockquote>\n<h3 class=\"highlight\">What Has Changed in Modern Browsers<\/h3>\n<p>Since 2020, the Interop initiative has brought Apple, Google, Mozilla, and Microsoft into an unprecedented alignment. Interop 2022, 2023, and 2024 tackled sticky positioning, subgrid, <code>:has()<\/code>, <code>color-mix()<\/code>, and dozens of other once-inconsistent features. Baseline now provides a clear signal: if a feature is Baseline, it works the same everywhere.<\/p>\n<p>The practical upshot? The number of genuine, load-bearing browser inconsistencies you need a reset to paper over has dropped dramatically. You&#8217;re no longer fighting <code>line-height<\/code> differences between Chrome and Safari on form inputs the way you once were.<\/p>\n<h3 class=\"highlight\">The Modern Minimal Reset<\/h3>\n<p>Most developers who have revisited this question have converged on something small and intentional &#8211; not a full reset, but a set of sensible adjustments. Here&#8217;s a well-regarded starting point, popularised by Josh Comeau and Andy Bell:<\/p>\n<pre class=\"language-css\"><code>\/* Modern CSS Reset - circa 2024\/2025 *\/\r\n\r\n*, *::before, *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n* {\r\n  margin: 0;\r\n}\r\n\r\nbody {\r\n  line-height: 1.5;\r\n  -webkit-font-smoothing: antialiased;\r\n}\r\n\r\nimg, picture, video, canvas, svg {\r\n  display: block;\r\n  max-width: 100%;\r\n}\r\n\r\ninput, button, textarea, select {\r\n  font: inherit;\r\n}\r\n\r\np, h1, h2, h3, h4, h5, h6 {\r\n  overflow-wrap: break-word;\r\n}<\/code><\/pre>\n<p>That&#8217;s it. Around 20 lines. Each rule earns its place: <code>box-sizing: border-box<\/code> is arguably the most universal improvement ever made to CSS ergonomics. Images as <code>display: block<\/code> kills the mysterious gap below inline images. <code>font: inherit<\/code> on form elements prevents the browser from ignoring your font stack in inputs. None of these fight the browser &#8211; they simply correct genuine papercuts.<\/p>\n<h4>What About Normalize.css?<\/h4>\n<p>Normalize.css still sees millions of downloads a week. It&#8217;s not wrong to use it, but it&#8217;s worth noting that it hasn&#8217;t seen a major release since 2018. Many of the inconsistencies it addressed have since been resolved natively. If you&#8217;re starting a greenfield project targeting modern browsers, you may find the minimal reset above covers everything you actually need.<\/p>\n<h3 class=\"highlight\">When a Full Reset Still Makes Sense<\/h3>\n<p>There are scenarios where a more aggressive reset is still justified. If you&#8217;re building a component library or design system that will be embedded in third-party pages, you can&#8217;t rely on the host document&#8217;s styles not bleeding in. CSS layers and <code>@layer<\/code> have made some of this easier to manage, but a defensive reset at the component boundary can still be the pragmatic choice.<\/p>\n<p>Similarly, if you&#8217;re targeting an unusually wide browser matrix &#8211; maybe a government service that must support older WebKit &#8211; Normalize.css or a tested, project-specific reset is worth the overhead.<\/p>\n<table class=\"compare\">\n<thead>\n<tr>\n<th>Approach<\/th>\n<th>Best For<\/th>\n<th>Maintain?<\/th>\n<th>Size<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>No reset<\/strong><\/td>\n<td>Prototypes, single-browser tools<\/td>\n<td class=\"yes\">\u2713 None<\/td>\n<td>0 KB<\/td>\n<\/tr>\n<tr>\n<td><strong>Minimal reset<\/strong><\/td>\n<td>Modern web apps, component libraries<\/td>\n<td class=\"yes\">\u2713 Minimal<\/td>\n<td>&lt;1 KB<\/td>\n<\/tr>\n<tr>\n<td><strong>Normalize.css<\/strong><\/td>\n<td>Broad browser support, legacy projects<\/td>\n<td class=\"no\">\u2717 Unmaintained<\/td>\n<td>~3 KB<\/td>\n<\/tr>\n<tr>\n<td><strong>Full reset (Meyer)<\/strong><\/td>\n<td>When you rebuild all defaults yourself<\/td>\n<td class=\"yes\">\u2713 Stable<\/td>\n<td>~2 KB<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3 class=\"highlight\">The <code>@layer<\/code> Revolution<\/h3>\n<p>One development that changes the calculus is <code>@layer<\/code>. CSS Cascade Layers, now supported in all modern browsers, let you explicitly declare the cascade order of your stylesheets. A reset layered at the bottom has zero specificity fights with your component styles. You can slot in a reset without worrying that it&#8217;ll clobber something upstream.<\/p>\n<pre class=\"language-css\"><code>@layer reset, base, components, utilities;\r\n\r\n@layer reset {\r\n  *, *::before, *::after { box-sizing: border-box; }\r\n  \/* ... *\/\r\n}\r\n\r\n@layer components {\r\n  \/* Your styles here - always win over reset layer *\/\r\n}<\/code><\/pre>\n<p>This is perhaps the most compelling reason to <em>keep<\/em> a reset in 2026 &#8211; not because browsers are inconsistent, but because structuring your cascade intentionally with layers is simply good engineering. A reset layer makes the starting point explicit and auditable.<\/p>\n<div class=\"verdict\">\n<span class=\"verdict-label\">The Verdict<\/span><\/p>\n<h2>Yes &#8211; But a Small, Intentional One<\/h2>\n<p>You don&#8217;t need a reset to patch over browser bugs anymore. You need one to establish a deliberate baseline &#8211; to say, clearly, where your design begins. A focused 20-line reset, slotted into a <code>@layer<\/code>, gives you that foundation without the dead weight of six years of unmaintained compatibility shims. The era of the defensive mega-reset is over. The era of intentional, minimal defaults is now.<\/p>\n<\/div>\n<h3 class=\"highlight\">Further Reading<\/h3>\n<p>Andy Bell&#8217;s &#8220;A (more) Modern CSS Reset&#8221; on his blog remains the definitive modern take. Josh Comeau&#8217;s &#8220;My Custom CSS Reset&#8221; walks through every line with detailed reasoning &#8211; highly recommended if you want to understand <em>why<\/em> rather than just copy-paste.<\/p>\n<p>Whatever you choose: read it, understand it, and own it. A reset you can explain is a reset worth having.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For years, a CSS reset was the first thing pasted into every new stylesheet. Eric Meyer&#8217;s reset. Normalize.css. The &#8220;* { margin: 0; padding: 0 }&#8221; trick. They were almost ritual &#8211; a ward against the chaos of browser inconsistency. But the web has changed dramatically. So has CSS itself. The question is no longer [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":790,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-789","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/789","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=789"}],"version-history":[{"count":1,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/789\/revisions"}],"predecessor-version":[{"id":791,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/789\/revisions\/791"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media\/790"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=789"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=789"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=789"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}