CSS Reset & Atomic CSS

CSS Reset

Different browsers have different default styles. CSS Reset eliminates these differences for consistent rendering.

Basic Reset

CSS

/* Universal reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base body styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* Link reset */
a {
  text-decoration: none;
  color: inherit;
}

/* Image responsive */
img {
  max-width: 100%;
  display: block;
}

Normalize.css vs Reset

Approach	Pros	Cons
Normalize.css	Preserves useful defaults, only fixes inconsistencies	More complex
Full Reset	Clean slate, full control	Must redefine everything

Recommendation: Use Normalize.css for most projects.

Atomic CSS

Each class does one thing — like building blocks:

Example

HTML

<style>
.text-center { text-align: center; }
.text-red { color: red; }
.mt-10 { margin-top: 10px; }
.p-20 { padding: 20px; }
.bg-light { background-color: #f5f5f5; }
.border { border: 1px solid #ddd; }
.rounded { border-radius: 4px; }
</style>
<div class="p-20 bg-light border rounded">
  <h3 class="text-center">Card Title</h3>
  <p class="mt-10">Card content</p>
</div>

▶ Try it Yourself

Benefits

Fine-grained: Each class does one thing, flexible combinations
Highly reusable: One .flex works anywhere
Smaller CSS: No duplicate property declarations
Safe changes: Modifying one class won't break unrelated elements

❓ FAQ

Q Normalize.css or CSS Reset?

A Recommend Normalize.css — it preserves useful defaults (like h1 font size) while only fixing browser inconsistencies. Traditional Reset zeros everything, meaning you must redefine every element, increasing work.

Q Does `* { box-sizing: border-box }` affect performance?

A Almost not at all. Universal selector performance overhead is negligible in modern browsers, and the benefits of `box-sizing: border-box` far outweigh any theoretical performance loss. Use it confidently.

Q When should I use atomic classes?

A Best for large projects or unified design systems. Small projects can use regular classes. Frameworks like Tailwind CSS have higher learning curves — not every project needs them.

📖 Summary

CSS Reset eliminates browser default style differences — project foundation
Atomic CSS provides "Lego block" style writing — each class does one thing, combine as needed
In practice, Reset and atomic classes usually live in one base stylesheet as all pages' starting point

📝 Exercises

Create a reset.css file with: universal margin/padding/box-sizing reset, body base font/color, link style reset, responsive images.
Add at least 10 common atomic classes to reset.css (flex, spacing, text alignment, etc.).
Create an HTML page using only atomic classes from reset.css for a simple card layout (title, text, image).