Last updated on

CSSで既存スタイルを打ち消す——`0`・`initial`・`unset`・`revert` の違いと使い分け

  • CSS
  • レイアウト

コンポーネントにデフォルトの余白を付け、ブレークポイントが変わった側だけ打ち消す、といった実装で「どの値で打ち消すか」が話題になります。例えば次のような SCSS です。

.p-media__content {
  margin-block-start: rem(40);

  @include mq() {
    /* ここで余白をどう扱う？ */
  }
}

この記事では、打ち消し候補としてよく出る 0（具体的な値の例として）・initial・unset・revert を並べて整理します。

前提：継承プロパティかどうかで、initial と unset の差が開く

CSS のプロパティは 親から子へ値が継承されるか で分類できます。

種類例initial と unset の関係
非継承margin-block-start、width などunset は initial と同じ扱い（仕様上の初期値へ）。margin-* の初期値は 0 なので、0 / initial / unset は 見た目がほぼ揃いやすい
継承color、font-size、line-height などunset は inherit と同じ扱い（親の計算値を継承）。initial は 親とは無関係に、そのプロパティの初期値 になるので、親の指定とは別の結果 になり得る

revert は 継承／非継承に依存しない、「カスケードをいくつか巻き戻す」という別軸のキーワードです（後述）。

各キーワードの意味

0 など 具体的な値

そのプロパティに、解釈可能な一つの値を明示する 指定です。余白なら margin-block-start: 0 のように、「この軸ではゼロ」と読み手に伝わりやすく、レビューでも誤解が起きにくいです。

※ color のように「0 自体が無効」なプロパティもあるため、本文では margin-* を主な例 にします。

initial

CSS の仕様で定義された、そのプロパティの初期値 に戻します（継承による値は参照しません）。

  • 非継承（例: margin-block-start）: 初期値は 0 なので、余白だけ見れば 0 と実質同型の結果 になりやすいです。
  • 継承（例: color）: 親が color: red でも、子に color: initial を書けば 親の赤は使われず、そのプロパティの初期値側に寄ります。

initial は プロパティごとに「初期値」が違う ので、「全部 initial でまとめリセット」のように広げると、期待と違う色・フォントサイズになることがあります。

unset

継承プロパティなら inherit と同様、非継承プロパティなら initial と同様 に振る舞います。

  • 非継承（例: margin-block-start）: initial と同様で、たいていは 0 に寄る。
  • 継承（例: color）: 親の計算値を引き継ぎます。コンポーネント内で一度色を上書きしたあと、親列に合わせ直す ような意図に向きます。

.text-reset のように、継承系・非継承系で「デフォルト扱いに戻す」を同じキーワードで表したい ときに unset を選ぶ設計もあり得ます。

revert

initial / unset の「初期値・継承」の話と 並列の軸 です。作者スタイル側で当てた宣言を巻き戻し、カスケード上 より下位の由来（ユーザエージェントスタイルやユーザースタイルなど、状況に依存）で決まる値に戻します。

  • 継承・非継承どちらでも、「このプロパティについて作者層の指定をやめる」という意味合いが同じです。
  • 要素によっては UA の既定が 0 ではない こともあります（例: p の上下マージン）。そのため margin-block-start: revert と 0 が一致しない 場合があります。

単純なコンポーネント余白で「確実にゼロ」が欲しいなら 0、UA 既定に寄せたい要件がはっきりしているなら revert、と切り分けると混同しにくいです。

用途別の整理（実務向け）

目的候補
この要素の margin-block-start を確実に無くしたい0（意図が最も明確）
汎用ユーティリティで「継承あり／なしが混在しても同じ語でリセット表現したい」unset
仕様上の初期値へ、と抽象的に書きたい（プロパティごとの初期値に従う）initial
作者 CSS を巻き戻し、UA など下位由来の値に任せたいrevert（UA 既定が 0 とは限らない点に注意）
継承プロパティで、親の見た目に揃え直したいunset または明示の inherit

まとめ

  • 非継承（margin-* など）だけ を打ち消すなら、margin-block-start: 0 のように 具体的な値が最も読みやすく、チーム運用にも向きます。ここでは initial と unset は効果がほぼ重なりがち なので、読み手の解釈コストとデザインシステムの統一ルール で選ぶとよいです。
  • 継承プロパティでは unset（≒ inherit）と initial は別結果 になり得るため、「親に合わせるか、仕様初期値に切るか」を意識して使い分けます。
  • revert は 継承の有無とは独立に、カスケードの巻き戻しで効くキーワードです。0 / initial / unset とは別物として並べて考えると混同しにくいです。