「inherit」を使いまくったという話

自分でCSSを書く場合には、 プロパティの値に「inherit」を使うことはこれまで全くといって無かったのですが、別の方が作ったCSSの関係で「inherit」を使いまくったというどうでもいい話です。

inheritとは

「inherit」を訳すと「受け継ぐ」や「引き継ぐ」という意味になります。 CSSで指定されたプロパティを継承します。

発端

そのCSSを見てみると以下のような記述がありました。

コード1


html, body, div, span, object, <略> audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:62.5%; //ここに注目
    vertical-align:baseline;
    background:transparent;
}

reset CSSを使っているのですが、だいたいのreset CSSはfont-sizeは「100%」の指定になっています。

フォントサイズの指定に、「rem」や「em」を指定する場合に、62.5%を指定して、14px相当にする場合に、「1.4rem」や「1.4em」とします。
このCSS書いた方の意図は分かりますが、62.5%を指定する箇所は考えてほしいなぁーと強く感じました。

例えば、次のようなHTMLの場合

コード2


<p>
	<em>強調テキスト</em>本文テキスト本文テキスト本文テキスト
</p>

フォントサイズを指定する時に、自分がいつも書く場合だとp要素に指定をします。

コード3


p {
	font-size: 14px;
}

p要素のテキストがフォントサイズが14pxになります。しかし、コード1のようにしている場合には、コード2のHTMLの場合だとem要素がfont-size「14px」が効きません。そのためem要素にもフォントサイズの指定が必要になります。

em要素に「14px」指定するのもどうかと思うので、そういう場合に「inherit」を使って対応しました。

コード4


p {
	font-size: 14px;
}
p em {
	font-size: inherit;
}

「inherit」を使いまくった、という話でした。オチ無し