モダンCSSのDos/Don'ts（100dvw、:focus-visible、:has()、@layer など）をAIへのルールにも入れる

Googleの「Modern Web Guidance」から、CSSでやるべきこと・やってはいけないことを抜き出したもの。人のコーディング規約にも、AIへのルールファイルにも使える。

CSSのコーディング規約を見直すとき。AIが古いCSSを書くのを防ぎたいとき。

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

使い方：この表をDESIGN.mdやAGENTS.mdの「CSSのルール」欄に貼る。