一言で言うとプロパティの初期化になるのですが、
それぞれが異なる動きをします。
自分のまとめも兼ねて投稿します。
これは何？
CSSの値のキーワード
プロパティに対して、初期値・継承値をセットします。
この為、プロパティをリセットしたい時に使用できます。
使いたい場面
- ABテスト等で特定のstyleを消したい時。
- CSSフレームワークを使用する際に、特定のstyleを消したい時。
- 急ぎ（障害対応等）でstyleを設定したい、かつ複数のセレクタが入り混じって何だか分からない時に、一旦styleを消してしまいたい時。
基本的には「初期値・継承値をセット」なのですが、それぞれ異なる働きをするので、注意が必要です。
各プロパティ
initial
そのstyleのプロパティの初期値又は規定値を設定する。初期値に戻したい時に使用できる。
ここでの初期値は、ブラウザーのスタイルシートで指定された値ではありません。
使用する場面としては、場面としてはABテストやhot-fix等でしょうか。
IE11は未対応。
https://caniuse.com/#feat=css-initial-value
inherit
プロパティの計算値を、明示的に継承することを指定することができます。
私個人としては、あまり使った事がないです。
何か便利な使い方がありそうですが。。
unset
プロパティをリセットし、親からの継承された場合は継承値、それ以外は初期値を設定します。MDNの例が分かりやすいと思います。
使いどころとしては、何かの子要素にstyleが設定されていた時に、親要素のstyleを継承させたい場合に使うかと思います。
場面としてはABテストやhot-fix等でしょうか。
IE11は未対応。
https://caniuse.com/#feat=css-unset-value
revert
ユーザーエージェントのstyleをセットします。プロパティそのものの初期値ではありません。
参考
https://developer.mozilla.org/ja/docs/Web/CSS/inherit
https://developer.mozilla.org/ja/docs/Web/CSS/initial
https://developer.mozilla.org/ja/docs/Web/CSS/unset
https://developer.mozilla.org/ja/docs/Web/CSS/revert