便利だなと思ったCSSテクニック【初心者向け】

あくまでも初心者向け

あくまでも初心者目線となります。（なのでテクニックって言うほどじゃないかも...）
私と同じことで悩むことがなくなったり、新たな発見に繋がると嬉しいと思ってこの記事を書いています。

親要素の設定を引き継ぐ

a {
  color: inherit;
}

inheritキーワードは親要素の設定を引継ぎます。

例えば、

// HTML
<p>詳細は<a href="#">こちら</a></p>

// CSS
p {
  color: #fff;
}

p a {
  color: #fff;
}

a要素も文字色を変更したい場合は、２回同じ指定をする必要があります。

しかし、

// HTML
<p>詳細は<a href="#">こちら</a></p>

// CSS
p {
    color: #fff;
}

p a {
    color: inherit;
}

上記の記述を使えば、文字色が変更になっても修正箇所はひとつで済みます。

......

擬似要素にも同じ色を使う

.nav-btn {
    /* 省略 */
    width: 30px;
    height: 30px;
    cursor: pointer;
    color: #333;
}

.nav-btn::before,
.nav-btn::after {
    /* 省略 */
    color: currentColor;
}

これはハンバーガーメニューの実装で見た例。

currentColorを使って色を揃えています。
こちらも、色の変更があっても修正が一箇所で済みますね。

......

随時更新予定

私も勉強中なので、引き出し全然ありません。すみません...。
今後もっと増やしていきたいと思っています。

もし「こんな便利なテクニックあるよ！」という場合は
コメントにてお待ちしています。

実際に試してみた後に、記事に追記していきたいと思います。