How do you reset CSS properties?

I’m wondering how do you usually reset CSS properties to their default values? Do you use the initial (default) value for the given property or the initial keyword?

---

Example:

main {
  padding-bottom: 1rem;
}

main:hover {
  padding-bottom: 0;

  /* vs */

  padding-bottom: initial;
}

I’m asking because I mostly use the initial value (0 in the example above). And because of that I sometimes forget what the initial value is and need to check it. It’s usually not a big deal but I just had an idea for a VS Code extension that shows the value on hover. Will it be helpful to you?

Comments

[Nicola]

If you want to reset and delete a property try to use unset.

Else if you want the property to be handled from a parent instance, or another css rule use inherit.

But in your case I use usually the :not selector excluding some properties in a specific or a set of states:

/* BEFORE */

main {
  padding-bottom: 1rem;
}

main:hover {
  padding-bottom: 0;

  /* vs */

  padding-bottom: initial;
}

/* AFTER */

main:not(:hover) {
  padding-bottom: 1rem;
}

I prefer this solution because is more clean and more readable. What do you think about this?

[Dzhavat Ushev]

Using :not() is a nice approach but isn’t it hard to keep track of with many properties?

Sometimes the reset is not based on just a state but on a nesting position or one sub-property out of many (e.g. background-color when it was previously set using background). I imagine this will result in a complicated :not() selector where a simple 0, transparent or initial will do the same this with less code.

unset is nice too but behaves differently whether the property inherits from its parent or not. Or maybe I find it confusing because I’m not used to it.

Do you think an extension that shows you the default value for a selected property will provide you some benefit?

[Nicola]

I think in css :not could be a mess. But with precompiled stylesheets (SCSS, LESS) it could be very useful. Anyway there isn't a global solution, you need to find the best one according to your needs.

Do you think an extension that shows you the default value for a selected property will provide you some benefit?

Yes of course, sometimes it's hard to check what property an object inherit from a super class or id, expecially when they are inherited from third-part components.

I think a plugin wich displays a graph with inheritances is needed!

[Eric Ahnell]

My favorite strategy for this is to use Normalize.css, or something derived from it, to get known defaults, which makes removing my customizations simpler. Of course, if I simply need to inherit from the parent, I use "inherit" as the style value.

[Dzhavat Ushev]

Using Normalize is quite handy. But this tool just makes sure you have consistent starting point between browsers. What about resetting a property during run time? Say you have set a background-color that you want to reset back to its default value? Would you use transparent, initial, unset or something else?

[Eric Ahnell]

initial if I am reverting a change I made; inherit if I overrode the parent and wish to undo it, unset otherwise.