🧹 Mastering all, revert, revert-layer, and unset in CSS

📌 Introduction

CSS provides special global keywords that let you reset, revert, or control how properties behave in the cascade. These four — all, revert, revert-layer, and unset — are extremely powerful for resetting components, fixing unexpected inheritance, and writing clean CSS architecture. ✨

>>“When the cascade gets messy, these keywords restore order.”

🧠 1. all — Reset ALL CSS Properties

The all property is a special CSS property that targets every CSS property (except unicode-bidi and direction). You can use it with keywords like initial, inherit, unset, or revert.

✨ Example: Reset a component completely

Using all: initial

button {
  all: initial;
  font-size: 16px;
  padding: 8px 12px;
}

This resets everything — box model, font styles, borders, etc., giving you a clean slate.

KeywordEffect on all
all: initialResets everything to browser defaults 🌐
all: inheritInherits all properties from parent 🔗
all: unsetActs like inherit for inherited properties, else initial ⚖️
all: revertReverts to author/user-agent stylesheet 📄

Note

💡 Use all sparingly — it is extremely powerful and can remove more styles than intended.

🔄 2. revert — Roll Back to Browser or Author Default

revert tells the browser:“Ignore my rule and go back to what the browser or earlier stylesheet said.”

Using revert

p {
  color: red;
}

p.override {
  color: revert; /* Goes back to default (usually black) */
}

✔ Useful for overriding opinionated frameworks
✔ Helps undo styles without guessing defaults

🧠 When does revert NOT work?

  • If no earlier rule defines that property
  • If user-agent default is the only fallback

🏛️ 3. revert-layer — Roll Back Within Cascade Layers Only

revert-layer is similar to revert but limited to CSS within the same cascade layer. It ignores rules from other layers completely.

revert-layer Example

@layer framework {
  button {
    color: blue;
  }
}

@layer app {
  button {
    color: red;
  }

  .reset-btn {
    color: revert-layer; /* Goes back to 'red', not 'blue' */
  }
}

✔ revert-layer undoes only styles defined in your own layer
❌ It does NOT revert to framework or browser defaults

Note

💡 Use revert-layer for component overrides inside structured CSS architecture.

⚖️ 4. unset — Smart Reset

unset works like a hybrid:

  • Acts like inherit for inherited properties
  • Acts like initial for non-inherited properties

unset Example

p {
  color: green;   /* inherited property */
  margin: 20px;   /* non-inherited */
}

.special {
  color: unset;   /* becomes inherited from parent */
  margin: unset;  /* becomes initial (0) */
}

🧠 This makes unset very useful for undoing modifications without breaking layout.

🎯 Summary Comparison

KeywordWhat It DoesWhere It Reverts To
allResets ALL properties at onceDepends on keyword: initial / inherit / revert / unset
revertUndo author ruleBrowser defaults or earlier stylesheet
revert-layerUndo rule in current cascade layerLayer-defined previous values only
unsetSmart resetinherit (for inherited props) or initial

🧠 Real-World Example: Fixing Overly Opinionated Framework CSS

Undo Framework Styles

/* Framework forces big padding */
.card {
  padding: 40px;
}

.my-card {
  padding: revert; /* Back to browser or earlier stylesheet */
}

🧩 Example: Creating a Clean Button Reset

Button Reset

button {
  all: unset;
  padding: 8px 16px;
  background: black;
  color: white;
  cursor: pointer;
}

✔ Removes default borders, fonts, spacing — a perfect blank canvas.

🔗 Helpful Resources

>>“Reset only what you must — and understand what you are undoing.” 🧠✨