CSS値の「initial」「inherit」「unset」「revert」の違い

一言で言うとプロパティの初期化になるのですが、
それぞれが異なる動きをします。
自分のまとめも兼ねて投稿します。

#これは何？
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