Let me tell you about a time I was debugging a weird visual bug in a web component.
Everything looked perfect—until one nested <div> looked totally out of place: unexpected font, background color, margins… total chaos. After 30 minutes of inspecting inherited styles, I realized the culprit was deeply nested inherited CSS from multiple layers up.
I wished I could just "nuke" all the inherited styles.
Turns out, I could.
Meet: all
Yes, there’s a CSS property literally named all, and it can reset (almost) every style on an element with just one line.
🎯 What is the CSS all Property?
The all property is a powerful shorthand in CSS that resets all properties on an element—except for direction and unicode-bidi.
✅ Use cases:
- Reset inherited styles on deeply nested elements
- Prepare a clean slate for components
- Avoid specificity hell
- Quickly isolate styles during debugging
💡 Syntax
selector {
all: initial | inherit | unset;
}
🧪 Example
Let’s say you have a div that’s picking up a ton of styles:
div {
background-color: yellow;
color: red;
font-size: 24px;
}
But now you want to completely wipe those styles out for a specific instance:
div.special {
all: initial;
}
That all: initial will reset every style back to its initial browser default.
🔍 Property Values Explained
| Value | Description |
|---|---|
initial | Resets all properties to their initial default values. |
inherit | Forces all properties to be inherited from the parent. |
unset | Resets to inherited if possible, or initial if not (hybrid behavior). |
🧠 How It Works Internally
When you use all, it's as if you're manually resetting every individual property:
all: initial;
/* Equivalent to: */
color: initial;
background-color: initial;
margin: initial;
padding: initial;
/* ...and hundreds more */
✅ But you don’t need to write all of them—all handles it!
❌ Excludes:
unicode-bidi
direction
These are intentionally left alone for logical rendering purposes.
🌍 Browser Support
Modern browser support is solid:
| Browser | Version Support |
|---|---|
| Chrome | 37+ |
| Edge | 79+ |
| Firefox | 27+ |
| Safari | 9.1+ |
| Opera | 24+ |
Just avoid it if you’re supporting Internet Explorer.
🧰 Real-World Examples
1. 🔧 Resetting a Component's Style
.card * {
all: unset;
}
Useful in design systems where you want complete control over how each element renders.
2. 🌐 Starting from Scratch
.reset-box {
all: initial;
display: block;
padding: 1rem;
border: 1px solid #ccc;
}
Ideal for email templates, embedded widgets, or third-party iframes.
⚠️ When Not to Use It
- If you don’t know exactly what styles you're affecting—be careful!
- It may reset accessibility-related styles like focus outlines.
- It won’t animate —
allis not animatable.
🧠 Bonus: Frontend Interview Questions on all
- What does the
allproperty do in CSS? - Which properties are excluded from the
allreset? - How does
all: unsetdiffer fromall: initial? - When would you use
allin a production-level UI? - Is
allanimatable? Why or why not? - How does
allimpact inherited vs non-inherited properties? - What are potential drawbacks of using
allcarelessly?
🗣️ Final Thoughts
The all property in CSS is a double-edged sword.
Use it strategically, and you gain absolute control over your styles.
Use it carelessly, and you risk wiping out crucial UI behavior.
Like a reset button for styles, it’s especially useful for custom components, third-party widgets, and modular CSS workflows.
So the next time your component looks like it’s inherited the sins of its ancestors—reach for all.
Sometimes, a clean slate is exactly what your UI needs. 💡