CSSの値【inherit】って知ってる？

inheritとは

英語で言う継承っていう意味です。
つまり親のスタイルを参照するよってこと

例えば

<h1 class="main-headline">タイトル</h1>

↑にリンクつけたいな〜ってなった時。

<h1 class="main-headline"><a href="/">タイトル</a></h1>

こう書くと、文言「タイトル」に適用されるスタイルは
.main-headlineではなく、aタグのスタイルが優先になりますよね
(親のクラス属性よりも自身のセレクタのほうが(クラス指定じゃなくても)実は強いんです )

でも、ベースのCSSとかでaタグにデフォルトのスタイルが指定されている時
(本当はこの時点でCSSの設計を見直すべきなんですが、そうも行かない時)
.main-headlineのスタイルが「タイトル」に適用されないからって……

以下のような実装してませんか？

前提条件(こんなCSSの運用例)

index.html

<!-- ※見出しの中にaタグが必ずしも入るとは限らない -->
<h1 class="main-headline"><a class="main-headline__link" href="/">タイトル</a></h1>

base.css

a {
  font-weight: normal;
  color: #000;
  text-decoration: underline;
}

これでは.main-headlineにcolorを指定しても
aタグについているcolorが勝ってしまいます
(リンクの汎用性、柔軟性が落ちているので役割でスタイルつけるの良くないです)

自分で新しくつけるCSS(ここからが本題)

aタグにCSSがついているので上書きするしか無いじゃん！
といって下記のように指定してみます。

style.css

.main-headline {
  font-size: 24px;
  font-weight: bold;
  color: deeppink;
}
/* 上記分のCSSで事足りるのが理想 */
.main-headline__link {
  font-size: 24px;
  font-weight: bold;
  color: deeppink;
  text-decoration: none;
}

もしくはスッキリさせるのであれば↓こう
(CSSは基本的に差分のみ書きましょう〜
無駄なスタイル付けはトラブルの原因になります )

style.css

.main-headline, .main-headline__link {
  font-size: 24px;
  font-weight: bold;
  color: deeppink;
}

.main-headline__link {
  text-decoration: none;
}

とはいえ、↑のように書くと2重定義って感じでなんだかなぁと思うときもあったり…
(差分をまとめて書いてはいるけど…)

そんなときはinheritを使ってみてはどうでしょう？

ベースにかけられているCSSを把握している事が前提になります

style.css

/* 親にだけ指定 */
.main-headline {
  font-size: 24px;
  font-weight: bold;
  color: deeppink;
}
/* 親のスタイルを継承します */
.main-headline__link {
  font: inherit;
  color: inherit;
  text-decoration: inherit;
}

こう書くと(ソースの見た目若干キモいけど)
ひと目で親継承っていうのが伝わるかなという一例です
(2重定義には変わりはないです、笑)

ちなみにinheritを使用する他のメリットとして、
font-sizeなどのPC,スマホで別々の指定をするプロパティでも
inheritを使えば1行で済むのも良いですね

style.css

/* 親にだけ指定 */
.main-headline {
  font-size: 24px;
}
/* PCの時 */
@media screen and (min-width: 767px) {
  .main-headline {
    font-size: 36px;
  }
}

.main-headline__link{
  /* 1行でPC, スマホ共に捌ける */
  font-size: inherit;
}

とはいえ......
本来であれば、こんなにinherit指定せずとも
親からスタイルが自然に落ちてくる状態がベストなので、

〜余力がある人はCSS設計を見直しましょう〜

親のスタイルが子に効かないゾと思った方は、
inheritを使ってみてはいかがでしょうか