モダンCSSコードスニペット: もう2015年のようにCSSを書かない

 (modern-css.com)
3 ポイント 投稿者 GN⁺ 2026-02-16 | 1件のコメント | WhatsAppで共有
  • 古い CSSハック手法 と、それを置き換える 最新のネイティブCSS構文 を並べて比較して見せるコード集
  • Grid, Flexbox, OKLCH color, container query, scroll-timeline などの最新標準を活用し、JavaScript 依存を減らす
  • 色、レイアウト、アニメーション、セレクタ、タイポグラフィ、ワークフロー などのテーマ別に分かれており、各機能のモダンな代替案を提示
  • 最新の CSS 標準によって JS、Sass、外部ライブラリへの依存を減らし、ブラウザのネイティブ機能 を最大限活用できる

関連記事

1件のコメント

 
GN⁺ 2026-02-16
Hacker Newsの意見

  • 2025年のCSSだなんて、まるで 2005年のようにインラインスタイル をHTMLに直接書こうと言っているようなものだ
    Tailwindの話をしているのだが、結局はフォーマットと表現の分離を無視していることになる

    • Web開発で最も古い 神話 は「関心の分離」という概念だ
    • HTMLとCSSは技術が分かれているだけだ
      HTMLが本当にコンテンツだけを担当し、CSSがスタイルだけを担当していたのなら、.container-wrapper .container .container-inner のような div soup を作る必要もなかったはずだ
      レイアウトを変えるたびにHTMLを修正しなければならない現実がその証拠だ
    • コードを難読化する必要はない、ただTailwindを使えばいい
    • むしろそのほうが良いと思う
      コンポーネント関連のコードが1か所にまとまっていて、ファイルを行ったり来たりする必要がない
    • 良いアイデアだと思う
      レイアウトとスタイルは切り離せないUIの一部 だ
      HTMLはコンテンツではなくレイアウトだ
      たとえ関心の分離を信奉するとしても、HTMLとCSSは同じ表現レイヤーに属している
      それらを分離できると信じるのは現実を直視していないのと同じだ

  • 最近のCSSの主な改善点を挙げてみた

    1. ネストセレクタ (nested selectors)
    2. :has(...)
    3. :is(...) — 以前は :not(:not(...)) のような小細工を使わなければならなかった
    4. :where(...) — :is(...) に似ているが、セレクタの詳細度が0 なので複雑なセレクタを書くときに便利
    • #1には強く同意する
      ほとんどのLLMはこの機能を知らない
      AGENTS.md に例を追加することを勧める
      MDN Nesting Selectorの文書 を参考にするとよい
      & セレクタを活用して 可読性と重複削減 を同時に得られる
    • 私がいちばん好きなのは text-box: trim だ
      20年間、デザイナーに大文字の上端揃えは不可能だと説明し続けていた時代が終わり、解放感がある
    • 個人的には @layer 機能がいちばん気に入っている
    • 2〜4は良いが、ネストセレクタはgrepできない ので嫌いだ

  • 例の一部は従来のやり方ならすべてのブラウザで動くが、新しいやり方はChrome/Edgeでしか動かない
    こういう例を載せるのは Blink独占 を強めるので無責任だと思う

    • 同意する。既定のフィルタが「newly available」に設定されていて、主要3ブラウザ（Chrome/Edge、Safari、Firefox）をすべて含むようになるとよい
    • サイトのせいではない
      むしろ Mozillaの標準準拠不足 を指摘すべきだ

  • 画面の端に要素を固定するのはやめるべきだ
    一部のサイトでは 画面の半分以上を静的要素 が占めている
    コンテンツはスクロールできるようにしておくのが自然だ

  • 皮肉なことにそのサイトは ダークモード固定 で、prefers-color-scheme を使っていない

  • 「創造的なCSSの例、いいね！」と思って見てみると、ブラウザ対応が40〜50%程度で現実的な制約がある

    • 昔はこうした対応不足が大きな問題だったが、今はかなり良くなった
      Chromiumの影響が過大であることのおかげではあるが、結果としては前向きだ
      Interop 2025 参照
    • 例のフィルタを「widely available」に変えれば対応率はかなり高くなる
    • 時間がかかるだけだ
      ブラウザベンダーはいつか 広範なサポート を実現するために、あらかじめ機能を追加している

  • Firefoxでは非対応と表示される例が、実際のデモでは普通に動いていて混乱する
    もしかして polyfill が適用されているのだろうか

    • 表示は「Limited availability」だ
      左下の緑色のパーセンテージは、その機能をサポートするブラウザ利用者の割合を意味している
      半分以下のことも多い
      結局のところ「modern CSS」というより「最新のChrome CSS」に近い
    • 機能サポートのラベリングがひどい
      たとえば sibling-index() はFirefoxではまだ動かないのに「widely available」と表示されている

  • 最近はTailwind、CSS-in-JS、Sass/SCSS、Vanilla CSSのどれを使うべきか迷う

    • 正解はない
      チームに合うものを使えばいい
      Tailwindが合うならそれでいいし、個人プロジェクトならインラインCSSでもいい、Sassに慣れているならそのままでよいし、
      最新のCSSに全振りしたいなら それも素晴らしい選択 だ

  • Web開発を長くやりすぎたせいで、「昔ながらのやり方」と呼ばれている例でさえ 初めて見る機能 が多い

  • 色の明るさ調整機能は初めて見た
    以前はSassとCompassで実装していたが、ツールチェーンの保守 が面倒だった
    今ではCSS自体で対応しているので、ずっと便利になった