最近のCSS動向

CSSの公式のロゴが制定されたようです。

https://github.com/CSS-Next/logo.css/tree/main

命名規則

FLOCSSと言う物があるので採用しています。

FLOCSSを採用している大きな理由は無く、CSSの命名規則を考えるのが面倒なのが一番です、、

少々クラス名が長ったらしくなり、HTML, CSSの見栄えが悪くなるのが難点です。

Container Queries（コンテナクエリ）

ビューポート全体ではなく、「親要素」のサイズをもとにレスポンシブ対応できる仕組み。

<style>
.card {
  container-type: inline-size;
  width: 100%;
  max-width: 500px;
  border: 1px solid #ccc;
  padding: 1rem;
}

@container (min-width: 400px) {
  .card h2 {
    color: green;
    font-size: 2rem;
  }
}
</style>

<div class="card">
  <h2>ここだけレスポンシブなタイトル</h2>
</div>

:has() 擬似クラス（親セレクタ）

<style>
// img要素を子孫に持つcardクラスのみ適用されるCSS
.card:has(img) {
  border: 2px solid green;
}

.card {
  padding: 1rem;
}
</style>

<div class="card">
  <img src="https://placehold.co/100x100" alt="sample">
  <p>画像付きのカード</p>
</div>

CSSネスト

直感的にネスト構造でスタイルを整理しやすく書けます

<style>
// 過去の書き方
.card {
  padding: 1rem;
  border: 1px solid #ccc;
}

.card h2 {
  color: navy;
  font-size: 1.5rem;
}

.card p {
  font-size: 1rem;
  color: #666;
}

// ネスト記法での書き方
.card {
  border: 1px solid #aaa;
  padding: 1rem;

  h2 {
    color: navy;
    font-size: 1.5rem;
  }

  p {
    font-size: 1rem;
  }
}
</style>

<div class="card">
  <h2>ネストされた見出し</h2>
  <p>これはネストされた段落です。</p>
</div>

新関数・Mixin・Anchor Positioningなど

サンプルは割愛しますが、続々と新しい関数がリリースされています。

JavaScriptでやっていたことをCSSでできるようになってきているので活用しましょう。