CSSはネストするべき

最近CSSにおいて、ネストが全ブラウザでサポートされました。
ネストとは入れ子の事で、プログラミングにおいてはこの階層が深くなる事を嫌う傾向にあります。

ネストが嫌われている理由

PHPなどのプログラミングにおいて、深いネストは嫌われております。
主にif文において、複数の条件式を使用する際に、1つのif文に1つの条件式のみを入れ、それを複数回繰り返したり、if文を抜け出ないまま、その中でまたif文が繰り返されるなどして発生すると思われます。

if文のネストが深いと、コードが右側に寄って見にくいどころか、それ以上にネストされている分だけ、頭の中で値を保持しながら処理を読み解く必要があるため、そうなるともはや人間技ではなくなってきます。

他にもあると思いますが、大体こんな感じかと思われます。

CSSにおいてはネストを使うべき

現在のCSSやSass（SCSS）においては、ネストは使うべきだと思います。

HTMLは元よりネストで構成された文書です。
HTMLの構造に合わせ、要素セレクタでネストしていけば、HTMLとCSSの関連性が直観的にわかりやすくなります。

極端な話、CSS側ではいくらでもネストしても大丈夫でしょう。
CSSでは条件分岐により処理が変わるという事は、まずないのですし、HTMLよりも深いネスト構造になる事は、よほど変なことをしていない限り、まずあり得ません。

重くなるのではないか

Sassにおいてネスティングは、ネストした分のセレクタが増えるため、動作が重くなると思うかもしれません。
しかし、そのような事で遅くなるような端末は、窓から投げ捨ててしまえと言われる程に古い機種でしょう。

表示が遅くなっているとすれば、たいていは通信容量の問題です。
インスタグラムやTwitter（現X）等のSNSを埋め込んでいれば、多少表示が遅くなるのは当然です。
むしろ、HTMLの構造に沿って命名された、やたら長いクラス名を、ほぼすべてのHTML要素に付与している方が、通信容量を増やして遅くする要因になるでしょう。
まぁそれも微々たるものかもしれませんが。

ユーザビリティのために、少しでも速くしたいという気持ちはわかりますが、目指すべきは、そこではないでしょう。

わずかな動作速度よりも可読性が大事

やったらめったら長く多いクラス名のHTML…
クラス名の1発指定により、各クラス名を把握していなければ要素の親子関係がわからないCSS…
親セレクタ（&）に文字が結合されて、クラス名での検索が出来ず、さらに目視で親子関係を調べる必要のあるSCSS…

ただでさえ他要素の影響を受けやすいHTML・CSSにおいて、そのようなヤバいコードは修正したくもないのです。

HTMLとCSSは親子関係の把握が重要になってきます。
親子関係を把握するには、シンプルで見やすいHTML、そしてCSSにはネストという理想的な方法も生まれてきました。
CSSの処理速度は現在の端末の処理性能からしたら、わずかな差でしかないので、メンテナンス性こそ重視するべきでしょう。