CSSの設定値を意図的に初期化する方法

目的

既に値が設定されているCSSのプロパティを後から値を無効化する必要があった。

具体的には、以下のようなシチュエーション

//  コード①
.toggle-nav {
  position: fixed;
  top: 0;
  left: 0;
  // 通常は左寄せ
}

//  コード②
@media (max-width: 992px) {
    .toggle-nav {
        //  指定の画面サイズ以下の場合は右に寄せたい
    }
}

上記の場合 コード②の.toggle-navに
" right: 0; "
を指定しても、先に
" left: 0; "
を指定しているのでコード②の.toggle-navには

left: 0;
right: 0;

の2つが指定されることになる。

こうなると、意図通りに右に寄せることができない。
（positionはleftとrightに値が指定された場合は、leftが優先されるので、）

なのでコード②で

left: 0;

を無効化する必要がある。

結論

初期化したいプロパティの値に"initial"を指定する。

コード

//  コード①
.toggle-nav {
  position: fixed;
  top: 0;
  left: 0;
  // 通常は左寄せ
}


//  コード②
@media (max-width: 992px) {
    .toggle-nav {
        left:  initial;
        right:  0;
        //  leftの値をinitialで初期化する事で、right:  0; のみが指定された状態にできる。
    }
}

補足

意外と使いそうで使ったことが無かった"initial"。今後も使う機会がありそうだと思った。