The role of revert in the CSS reset toolbox

CSS offers several keyword values for rolling back property styles, and revert is one of the more nuanced ones. As Miriam Suzanne explains in a Mozilla Developer video, revert resets a property to its inherited value, but stops at the user-agent (UA) stylesheet. That boundary is key: it does not, for instance, turn a <p> element back to inline, because the UA stylesheet already designates paragraphs as block-level.

Consider this HTML and CSS:

<p>Lorem, ipsum dolor.</p>
<p class="alt">Fugit, id vel.</p>
p {
  color: red;
}
.alt {
  color: revert;
}

Both paragraphs match the p rule and turn red. However, the class selector on the second paragraph carries higher specificity, so its color: revert; declaration wins and returns the text to black, the UA default.

Because color is a cascading property, inheritance changes the picture:

<div class="parent">
  <p>Lorem, ipsum dolor.</p>
  <p class="alt">Fugit, id vel.</p>
</div>
.parent {
  color: blue;
}
p {
  color: red;
}
.alt {
  color: revert;
}

Here the second paragraph renders blue. The revert keyword forces the element to accept its color from inheritance, rather than from the UA default.

Comparing revert, unset, and initial

The difference is small, but important: unset allows inheritance, while initial does not.

These three keywords apply to any property, but their behavior diverges on inherited values. Suzanne argues that revert is the most practical of the trio because it takes both user and user-agent styles into account. The other options are more aggressive in ways that can be counterproductive.

That reasoning suggests a possible fourth keyword — one that combines the forcing power of initial with the UA-stylesheet awareness of revert:

.button {
  all: default; /* Not real! */

  /* New styles starting from UA base */
}

Using all for a clean slate

The most compelling use case for these keywords is with all, which wipes out every style on an element in one shot. But none of the current three options delivers that cleanly. unset and revert fall short because they still permit inheritance, leaving some styles intact. initial, on the other hand, overcorrects: it removes defaults you generally want to keep, such as making a <div> inline instead of block.

As of now, revert is supported in Firefox and Safari, but not yet in Chromium-based browsers.