SCSS/SASSいらず？最新のモダンCSS

みなさん、こんにちは。
早いものでもう今年もあと1ヶ月と少し。
季節も冬となりましたが、いかがおすごしでしょうか。

現代コーディングの技術進化はすさましいものがありますが、
CSSもネストで記述できるまでになっています。

これまではSass/Scss等使わないと実現できなかったネスト記法が、
もうブラウザだけで動きます。
少し紹介しようと思います。

CSS ネストとは？

要素の入れ子構造に合わせてCSSもネストして書ける機能です。

.card {
  padding: 16px;
  .title {
    font-size: 20px;
  }
  .button {
    color: blue;
  }
}

この機能があるだけで、コーディングスピードは
倍増します。

さくっと終わらしたいページなどを
作るときには、Sass/Scssを使わずに、
CSSで記述するのも全然ありですね。

@media などのルールもネスト可能

.card {
  padding: 20px;

  @media (max-width: 600px) {
    padding: 10px;
  }
}

mediaクエリも使えるので、
レスポンシブも対応してます。

ネストは大変便利ですが、
入れ子構造を深くしすぎると、
コードが見にくくなったりする恐れがあるので、
適切に行いたいところです！

いかがだったでしょうか。
CSSのネスト機能つかってみてください。