[CSS] initial vs unset vs revert

/*
initial: default value of the css property, you don't need to remember what's the default value of each css property, just use initial should do the trick
unset: neither use the default value or the inherit value, but we don't want to remember which css property can use inherit or not, therefore we can use unset, it can also override default value
revert: reset to browser default style
*/

Here’s a concise explanation of the CSS values revert, initial, and unset:

1. revert:

   • Resets a property to the value it would have if no CSS rules were applied, respecting the user-agent stylesheet or inherited rules from the browser defaults.
   • Example: <button> text color would reset to the browser's default for buttons.

2. initial:

   • Resets a property to its default initial value defined in the CSS specification, regardless of inheritance or the user-agent stylesheet.
   • Example: display would reset to inline (its spec-defined default).

3. unset:

   • Acts as:
     • inherit if the property is inheritable.
     • initial if the property is not inheritable.
   • Example: For color (inheritable), it behaves like inherit. For margin (non-inheritable), it behaves like initial.

These values are useful for managing inheritance, resetting styles, and debugging CSS rules.