CSSの継承をうっかり無視して苦労する話｜実務で困らないための設計思想

#CSS #スタイル継承 #フロントエンド #継承 #詳細度
C
クリオ
Web制作ディレクター / フロントエンジニア

こんにちは！

今日は「CSSの継承をうっかり無視して苦労する話」について解説します。

僕も新人時代に、ほんま困ったのがこれなんです。
「親要素に指定したスタイルが子要素に反映されてない」「全体のフォントサイズを変えたのに、なぜか一部だけ違う」なんてことが日常茶飯事でした。

CSSの継承って何？僕が最初に勘違いしていたこと

CSS初心者時代の僕は、「継承」という言葉を完全に無視していました。
「スタイルを指定したら、すべての子要素に反映される」くらいの浅い理解で、実際には思った通りにいかなくてストレスでした。

まず、CSSの継承について正しく理解しましょう。
継承とは、親要素に適用されたプロパティが、子要素にも自動的に引き継がれる仕組みです。
ただし、すべてのプロパティが継承されるわけではなく、テキストや色に関連するプロパティが継承される傾向にあります。

例えば、<body>タグにcolor: #333とfont-family: 'Arial'を指定すれば、ページ全体のテキスト色とフォントが統一されます。
これが継承のおかげです。

一方で、marginやpadding、widthといったボックスモデルに関連するプロパティは継承されません。
これが現場で大きな落とし穴になるんですよ。

継承が機能しないプロパティと対処法

現場でよく見るのは、「なぜか上下の余白が効かない」という相談です。
大抵の場合、親要素にpaddingを指定して、子要素に継承されると思い込んでいるんですよね。

継承されないプロパティをざっくり列挙すると以下のようなものです。

  • margin、padding
  • width、height
  • border、background
  • display、position
  • z-index

実務で僕がよく使う対処法は、CSSリセットやノーマライズの時点で、これらのプロパティを明確に定義することです。

例えば、すべての要素にbox-sizing: border-boxを指定することで、widthの計算を一貫させています。

* { box-sizing: border-box; }このコード一行で、かなりトラブルが減りますよ。

また、リスト要素の<li>にはmarginとpaddingがデフォルトで付いているので、これをリセットするのも大切です。
リセットしないと、想定外の余白が発生してめっちゃ困ることになります。

実務で陥りやすい継承とリセットのバランス問題

ここからは、現場あるあるの話です。

新人の頃、僕はCSSをリセットしすぎました。
すべてのプロパティを0に設定して、ゼロベースから構築しようとしたんです。
これめっちゃ非効率です。

例えば、<body>にfont-size: 16pxとline-height: 1.6を指定すれば、すべてのテキスト要素がこの設定を継承します。
わざわざすべての<p>や<span>に同じプロパティを書き直す必要はありません。

継承を活用すれば、CSS量が削減され、メンテナンスも楽になります。
逆に、「このテキストだけは色を変えたい」という場合は、個別に上書きすればいいんですよ。

現在僕のチームで使っているアプローチは、「必要最小限のリセット + 継承の活用」です。

例えば、こんな感じです。

html { font-size: 16px; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #333; line-height: 1.6; }
* { margin: 0; padding: 0; box-sizing: border-box; }

このコードだけで、基本的なスタイルが整い、あとは必要な部分だけ追加・上書きするイメージです。

継承を活用した賢いCSS設計

ここが重要な部分です。継承を理解すると、CSSの設計が劇的に変わります。

例えば、テーマカラーを変更する場合を考えてみてください。
従来の方法では、すべての要素にcolor: #3b79b7と書かなければなりません。
ですが、親要素に指定して継承させれば、一度の変更で済みます。

:root { --primary-color: #3b79b7; }
body { color: var(--primary-color); }

CSS変数（カスタムプロパティ）も継承されるので、これで全体の色が統一されます。
後から色を変える場合も、:rootの値を変えるだけで済みますよ。

また、コンポーネント設計の観点からも、継承を意識することは大切です。
親コンポーネントで基本スタイルを定義して、子コンポーネントは必要な部分だけカスタマイズするイメージです。

僕も最初は「何でもクラスで細かく指定する」という悪い癖がありました。
ですが、継承を活用することで、CSSの記述量が2割以上削減できました。
また、コードの保守性も上がり、後輩の指導も楽になったんです。

実務のポイントとしては、「継承できるプロパティは継承させ、継承できないプロパティは個別に指定する」という使い分けが大切です。

まとめ

CSSの継承は、一見地味ですが、実務では めっちゃ重要な概念です。

今回のまとめです。

  • 継承は、親要素のプロパティが子要素に引き継がれる仕組み
  • テキストや色に関連するプロパティは継承されるが、ボックスモデルは継承されない
  • CSSリセットと継承のバランスが大切で、「必要最小限のリセット + 継承の活用」が賢明
  • CSS変数やコンポーネント設計で継承を活用すれば、コード量が削減できる

最初は戸惑うかもしれませんが、継承を意識してCSS設計をするようになると、めっちゃ効率が上がります。
ぜひ、プロジェクトで試してみてくださいね。