DEV Community

Cover image for Master the CSS `all` Property: Reset Styles in One Line
Raj Aryan
Raj Aryan

Posted on

Master the CSS `all` Property: Reset Styles in One Line

#css #webdev #programming #javascript

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;
}
Enter fullscreen mode Exit fullscreen mode

🧪 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;
}
Enter fullscreen mode Exit fullscreen mode

But now you want to completely wipe those styles out for a specific instance:

div.special {
  all: initial;
}
Enter fullscreen mode Exit fullscreen mode

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 */
Enter fullscreen mode Exit fullscreen mode

✅ 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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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 — all is not animatable.

🧠 Bonus: Frontend Interview Questions on all

  1. What does the all property do in CSS?
  2. Which properties are excluded from the all reset?
  3. How does all: unset differ from all: initial?
  4. When would you use all in a production-level UI?
  5. Is all animatable? Why or why not?
  6. How does all impact inherited vs non-inherited properties?
  7. What are potential drawbacks of using all carelessly?

🗣️ 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. 💡

Top comments (0)