CSSネストの使い方、Sassなしでの入れ子に全ブラウザ最新版が対応

CSSのネスト（入れ子）に全ブラウザ対応したことでCSSを軽量化した記述ができるようになりました。というのは2023年の話です。最新版のブラウザを使用している限りCSSネストが使用できますが、古い環境のユーザーには効かないということもあります。特に古いiPhoneを使用しOSをバージョンアップしていない場合は該当します。さすがに2025年現在CSSネスト未対応の環境というのもセキュリティ的な面で不安がありますので、啓蒙も兼ねてCSSネストの効果を述べます。

CSSネストとは？

CSSネストとはCSSを入れ子で記述する方法です。入れ子とは親子関係で例えばHEADERタグ内のAタグだけに適用する、と言うように使います。

header {
width: 100&; nav {
dislay: flex; a {
color: red;
}
}
}


上記をCSSネストを使わないとこのように記述します。

header {
width: 100%;
}

header nav {
display: flex;
}

header nav a {
color: red;
}


この書き方の場合、CSSに同じ記述が増えるのでその分容量が増えます。ページスピードインサイトでは「CSS の最小化」として指摘されます。ページスピードインサイト対策のためにもCSSネストの使用は必須と言えます。

各ブラウザの対応状況

CSSネストは以前はSassを使用するしかありませんでした。しかし現在、全ブラウザ最新版は対応しています。しかし、ブラウザのバージョンが古い場合は一部対応していないケースがあるので注意が必要です。

特にiOS Safari（17.1）以前が未対応なのでその点を考慮した書き方をした方が無難かもしれません。入れ子セレクター（＆）を付けておきます。

header {
width: 100&; & nav {
dislay: flex; & a {
color: red;
}
}
}


CSSネストはとても便利ですね。CSSの再利用もしやすくなります。ただ、入れ子を複雑にし過ぎると管理性が悪くなるのでご注意を。CSSのブレース「{ }」の数が合わなくなり崩れてしまったことがありますので。

CSSネストは深くし過ぎないこと

CSSネストは非常に便利なのですが、ネストが深くなり過ぎると管理性が悪くなります。

header {
nav {
ul {
li {
a {
span {
strong {
color: red;
}
}
}
}
}
}
}


なので適度なネストに留めておいた方が保守性が向上します。

CSSネストの限界値、さらなるページスピードインサイト対策

CSSネストを使うことでCSSの容量が削減可能です。ただし限界までCSSを削減してもページスピードインサイトで上がりきらない場合もあります。もし100点を狙いたいという場合はCSSの読み込み範囲を限定するという方法もあります。

<?php
function is_mobile()
{
$user_agent = $_SERVER['HTTP_USER_AGENT'];
return preg_match('/iphone|ipod|ipad|android/ui', $user_agent) != 0;
}
?>
<style>
<?php if ( !is_mobile() ) :?>
<?php include_once($_SERVER["DOCUMENT_ROOT"] . "pc.css");?>
<?php else : ?>
<?php include_once($_SERVER["DOCUMENT_ROOT"] . "sp.css");?>
<?php endif; ?>
</style>

PHPでデバイスのユーザーエージェント（UA）を取得しスマホの場合はスマホ用のCSSのみを読み込みます。PC用CSSは読み込まないのでスマホに不要なファイルのみに限定できます。ここまでやってもページスピードインサイトの点数が上がりきらない場合もあります。例えば弊社運営サイトの例です。

スコアは97点です。3点の減点はLCP「最大コンテンツの描画」要素への指摘です。「読み込み遅延」が65％とありLCPリソースの読み込み開始までの時間が影響していることがわかりました。それを改善して98点まできました。

技術的な対応の限界点に達しており、2点獲得のためにはJavaScriptの使用を見直すか画像の使用枚数を減らすしかないと考えています（ページスピードインサイトのためにコンテンツを選択することが良いことかは別）。少なくとも技術的対応で合格点には達成可能です（2025年4月現在）。

なお、「最大コンテンツの描画」要素への対策についてはこちらもご覧ください。