Google「Modern Web Guidance」の CSS Dos / Don'ts 早見表

古い書き方をモダンCSSに置き換えるための、Google 公式ガイダンス由来のチェックリスト。

どんな時に使う？

コードレビューや、AI が書いたフロントエンドのコードが「一昔前の書き方」になっていないか確認するとき。
チームのコーディング規約に「根拠付き」のルールを入れたいとき（「Google がこう言っている」は判断材料として強い）。

置き換え表

やめる	代わりに
全幅に `width: 100vw`	`100dvw`（モバイルのアドレスバーやスクロールバーでずれない）
`* { margin: 0 }` のグローバルリセット	必要な要素だけ個別にリセット
詳細度管理のための BEM	`@layer` と `:where()` で詳細度をコントロール
操作対象の最小サイズを `width` / `height` で指定	`min-block-size` / `min-inline-size`（最小 24px 角）
親の見た目を変えるために JS でクラスを付け外し	`:has()`
フォーカスリングに `:focus`	`:focus-visible`

css

@layer reset, base, components;

.button {
  min-inline-size: 24px;
  min-block-size: 24px;
}
.button:focus-visible { outline: 2px solid; outline-offset: 2px; }

/* 子の状態で親を変える */
.field:has(input:invalid) { border-color: crimson; }

/* 詳細度 0 で上書きしやすいデフォルト */
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }

補足

このガイダンスは Claude Code などのエージェント用スキルとしても配布されている（npx modern-web-guidance@latest install、関連投稿 @tonkotsuboy_com · 2026-05-21 ）。サイトを採点させて改善案を出させる使い方ができる。
表は投稿で紹介された例の抜粋。全項目は元記事を参照。

出典

@tonkotsuboy_com · 2026-05-21