見出し画像

コーディング時間が約半分になる？！CSSネスト

みそち

こんにちは、みそちです。

寒くなったり暖かくなったりと、最近は気温の変化が激しく体調を崩しやすいので皆様ご自愛ください。

本日はCSSネストについてです。
自分の無知を晒すようでお恥ずかしいですが、実装自体は前からあって、最近私が知った便利な記述補法についてです。

HTML・CSSを学習した後にお読みいただければ理解が深まるかと思います。
私の通う職業訓練校では学ばなかった内容になるので、書けると得をするかもしれません（しないかもしれません）。


CSSネストとは？

まずCSSとは、「カスケーディングスタイルシート」と呼ばれるもので、WEBサイトの見た目を整えたり装飾したりする役割を持つ言語です。
通常のCSSと比較して、親要素と子要素の関係を視覚的に分かりやすくする効果があります。

例えば従来のCSSの記述だと

header h1 {
color:red;
font-size:16px;
}

このように記述します。
headerの中にあるh1タグに色の指定赤、フォントサイズを16pxに指定したものです。

CSSネストの書き方は

header{
 h1 {
  color:red;
  font-size:16px;
  }
}

このように、CSSネストでは親要素headerの中に子要素h1を入れ子として記述できるため、コードが整理され、構造が把握しやすくなります。


メリット

  • 折りたたむことでコードがすっきりする

  • 保守性が高い

  • クラス名を考える手間が省ける

  • 直したい箇所をすぐに探すことができる

上記のメリットがあります。
勿論このほかにもたくさんあるかとは思います。


デメリット

  • 階層が深くなりすぎると逆に読みづらい

  • 可読性が環境に依存

一人で作業する場合には便利ですが、チームで作業する場合にはほかの方が読みやすいようにしないといけません。


まとめ


大きなページを作るとなると、一つ一つのコンテンツにたくさんコードを書くことになるので、階層が深くなりすぎてしまうケースもあります。
見やすさを重視するならクラスをつけるところはつけたほうが同じ階層で書き込めるので、見づらくならないのではないかなと思います。

2024年10月現在ほとんどのブラウザに対応しているようです。

実装自体は2022年されたようですが、そこからどんどん対応ブラウザが増えていったというような感じですね。

私は、HTML・CSSを学習してから半年ぐらい知りませんでした…。

もっと早く知っておけば、コードを書くのがもっと早くなっていたのになと思います。

CSSネストの概念は、もともとSassで使用されていたものに近いですが、CSSに直接ネスト構造を記述できるようになったため、拡張機能やプリプロセッサのインストールが不要になりました。これにより、CSSネストの導入ハードルが下がり、より手軽に使えるようになりました。

普通のCSSを書いていると、複数のスタイルが競合することがしばしばあり、優先度をその都度確認したりと手間が多かったのですが、入れ子構造にしてからはだいぶ減りました。

直したいコードを探す際にとっても便利！

ただし、職場やプロジェクトのコーディング規約によって、どちらの書き方が適しているかは異なることもあるので、従来のCSSとCSSネストの両方を使いこなせると良いかもしれません。

まだまだ勉強していくことが多いので引き続き学習していきます！
本日はここまでです。
ありがとうございました！

みそち

いいなと思ったら応援しよう！

この記事が参加している募集

#勉強記録

17,805件