CSS: CSS Reset & Atomic CSS
1. CSS Reset
Different browsers have different default styles. CSS Reset eliminates these differences for consistent rendering.
(1) 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;
}
▶ Example
A practical CSS reset combining normalization and box-sizing:
CSS
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.6;
}
ul, ol { list-style: none; }
img {
max-width: 100%;
display: block;
}
(2) 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.
2. 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>
(1) Benefits
- Fine-grained: Each class does one thing, flexible combinations
- Highly reusable: One
.flexworks anywhere - Smaller CSS: No duplicate property declarations
- Safe changes: Modifying one class won't break unrelated elements
▶ Example
Building a responsive card with atomic classes:
HTML
<style>
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.gap-10 { gap: 10px; }
.p-16 { padding: 16px; }
.bg-white { background: white; }
.shadow { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.rounded { border-radius: 8px; }
.text-lg { font-size: 18px; }
.text-gray { color: #666; }
</style>
<div class="flex flex-col items-center gap-10 p-16 bg-white shadow rounded">
<span class="text-lg">Card Title</span>
<span class="text-gray">Card description</span>
</div>
❓ 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.cssfile 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.cssfor a simple card layout (title, text, image).
