Why do we need Reset.css?

Brief Answer

Reset.css is needed to reset default browser styles and create a uniform foundation:

Removes differences between browsers 🌐
Resets margins and default sizes 📏
Normalizes element display ⚖️
Creates clean foundation for styles 🎨
Improves cross-browser compatibility 🔧
Simplifies interface development 💡

/* Simple reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
 
/* Popular Normalize.css */
<link rel="stylesheet" href="normalize.css">

Full Answer

Reset.css is like a clean canvas for an artist! Every browser has its own default styles that can ruin your design. Reset helps start from scratch. 🎭

Default Styles Problem

Browsers apply their own styles to elements:

/* Chrome default styles */
h1 { margin: 0.67em 0; font-size: 2em; }
p { margin: 1em 0; }
ul { margin: 1em 0; padding-left: 40px; }
 
/* Firefox might differ */
h1 { margin: 0.67em 0; font-weight: bold; }
p { margin: 1em 0; }
ul { margin: 16px 0; padding-left: 40px; }

Types of Reset Solutions

1. Aggressive Reset

Completely resets all styles:

/* Eric Meyer's Reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
 
/* Universal reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. Normalize.css

Normalizes styles while preserving useful ones:

/* Normalize approach */
h1 { font-size: 2em; margin: 0.67em 0; }
button { font-family: inherit; }
input { line-height: normal; }

3. Modern Reset

Minimalist approach:

/* Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
}
 
body {
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
 
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

Popular Reset Libraries

Eric Meyer’s Reset

Classic full reset:

html, body, div, span, h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
 
ol, ul { list-style: none; }
table { border-collapse: collapse; }

Normalize.css

Preserves useful styles:

/* Fixes display in IE */
article, aside, details, figcaption, figure, 
footer, header, hgroup, main, nav, section, summary {
  display: block;
}
 
/* Normalizes fonts */
button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
}

Tailwind CSS Preflight

Modern approach:

/* Base styles */
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}
 
/* Enhanced typography */
body {
  font-family: ui-sans-serif, system-ui;
  line-height: 1.5;
}

Creating Custom Reset

Minimal Reset

/* Basics */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
/* Typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
  line-height: 1.6;
  color: #333;
}
 
/* Media */
img {
  max-width: 100%;
  height: auto;
}

Extended Reset

/* Reset and normalize */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
/* Body improvements */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeSpeed;
}
 
/* Lists */
ul, ol {
  list-style: none;
}
 
/* Links */
a {
  text-decoration: none;
  color: inherit;
}
 
/* Forms */
button, input, select, textarea {
  font: inherit;
  border: none;
  background: none;
}

When to Use Reset

✅ Use Reset when:

Creating design from scratch
Need maximum cross-browser compatibility
Working with design team
Building UI library

❌ Don’t use Reset when:

Working with ready frameworks
Creating simple pages
Want to preserve semantic styles
Limited in CSS size

Best Practices

1. Choosing Right Reset

/* For new projects */
@import url('normalize.css');
 
/* For full control */
* { margin: 0; padding: 0; box-sizing: border-box; }
 
/* For modern projects */
@import url('modern-css-reset');

2. Customizing Reset

/* Basic reset + own improvements */
*, *::before, *::after {
  box-sizing: border-box;
}
 
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: #2d3748;
}
 
/* Own styles for headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.2;
}

3. Including Reset

<!-- At the beginning of head -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
 
<!-- Or inline -->
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
</style>

Reset Alternatives

CSS Custom Properties

:root {
  --spacing-0: 0;
  --font-base: 1rem;
  --line-height: 1.5;
}
 
* {
  margin: var(--spacing-0);
  padding: var(--spacing-0);
}

Utility-First Approach

/* Instead of reset use utilities */
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.border-box { box-sizing: border-box; }

Common Mistakes

❌ Wrong:

/* Too aggressive reset */
* {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
 
/* Forgot pseudo-elements */
* {
  box-sizing: border-box;
}

✅ Correct:

/* Balanced reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
/* Preserve useful styles */
strong { font-weight: bold; }
em { font-style: italic; }

Conclusion

Reset.css is an important tool for creating consistent interfaces:

Choose appropriate reset type
Customize for your needs
Include at the beginning of CSS
Test in different browsers

Proper reset is the foundation of quality markup! 🎯