good-css

良い CSS

自動で調整される宣言ひとつのほうが、ブレークポイントをいくつも設定するより優れています。また、CSS の機能はスクリプトより優れています。JavaScript は、JavaScript なしでも動作するものをより快適にする場合に限って使ってください。

各手法はプロパティと値の組み合わせなので、どのようなオーサリングシステムでも使えます。例にあるクラス名はプレースホルダーです。スタイルシート、Tailwind ユーティリティ、StyleX オブジェクトなど、プロジェクトですでに使われている形式で宣言を記述してください。そのシステムに宣言の省略記法がない場合は、Tailwind の任意プロパティやプロジェクトの CSS ファイル内のルールとして、完全な形式で記述してください。手法をブレークポイントで置き換えないでください。

すべての CSS で

これらにファイルは必要ありません。

• left、right、top、bottom の代わりに inline と block のプロパティを使ってください。Tailwind にも mbs-、pe-、inset-bs- などがあります。そのため、mt-、pr-、top- は使わないでください。block のプロパティには Tailwind 4.2 が必要です。それより前のバージョンでは、[margin-block-start:theme(spacing.4)] のように任意プロパティとして記述してください。
• 色は oklch() で記述し、グレー、白、黒の色相には none を指定してください。ホバー、色合い、透明色は color-mix(in oklch, …) で生成してください。
• 画面サイズに応じて大きくなるサイズは、ひとつの clamp() トークンにまとめてください。
• すべての :hover ルールを @media (hover: hover) and (pointer: fine) の中に記述してください。
• フォーカスのスタイルには :focus-visible と outline を使ってください。outline: none は使わないでください。
• 押せる要素すべてに :active の状態を設定してください。
• 要素を移動または拡大縮小するトランジションは、@media (prefers-reduced-motion: no-preference) の中に記述してください。プロパティ名を明示し、all は使わないでください。また、ease-in は使わないでください。
• はみ出したコンテンツは overflow: clip で切り取ってください。スクリプトが要素をスクロールする場合は hidden を使ってください。

記述する前に該当する項目を読む

各ファイルには、CSS とそのルールをまとめた項目があります。ルールは CSS が機能するための条件なので、すべて守ってください。これから記述する内容に該当する行のファイルだけを読んでください。ひとつのコンポーネントで該当する項目は 2、3 個、ページ全体ではほとんどの項目が該当します。

読むファイル	記述する前に
references/foundations.md	リセットまたはベースのスタイルシート、色トークンのセット、ダークモード、タイポグラフィまたはスペーシングのスケール
references/layout.md	ページまたはセクションのコンテナー、中央揃えの max-width ラッパー（コンテンツが端まで広がるかどうかは問いません）、カードのグリッド、各部が揃うカード、サイドバー、幅の異なるスロットに配置するコンポーネント、重なり合うレイヤー、はみ出す可能性のある中央揃えコンテンツ
references/spacing-and-shape.md	セクション間のスペーシング、上下に積み重ねる要素、行または列の端に寄せる項目、入れ子になった角丸
references/text-and-media.md	名前、タイトル、抜粋、サムネイル、アバター、埋め込みなど、ユーザーまたは CMS から取得するテキストや画像、ラベルの横に置くアイコン、中央からずれて見えるラベル、列に並ぶ数値
references/interaction.md	ボタン、リンク、入力欄、カードのフォーカス、ホバー、押下状態、小さなタップ領域、クリック可能なカード、フォームの入力検証、テキストエリア、内容に応じてスタイルを設定する親要素、モーダルの背後でのページスクロールのロック
references/motion.md	イージングと継続時間のトークン、複数の値を変えるひとつの状態変化、ホバー時に変化するシャドウ、ページ間のトランジション、アクティブなタブの下のインジケーター
references/show-and-hide.md	ダイアログ、ポップオーバー、ドロップダウンメニュー、アコーディオン
references/scroll-and-viewport.md	カルーセル、はみ出す可能性のある行、モーダルの本文、ヘッダーとフッターの間をスクロールするチャットリストまたはドロワー、スティッキーヘッダーの下にあるページ内リンク、デスクトップまたはスマートフォン上のアプリシェル

意図的に含めていないもの

* への text-box トリム、text-rendering: optimizeLegibility、すべての要素に display: contents または共通のグリッドセルを設定するリセットは、決して追加しないでください。その理由は references/foundations.md にあります。

ブラウザーのサポート

ほとんどの項目は Support: 行で終わります。このスキルでは、サポート対象ブラウザーの最低要件を定めていません。この行の内容をプロジェクトが対象とするブラウザーと照らし合わせ、使用した機能がそのいずれかでサポートされていない場合は、ユーザーに伝えてください。

モーション

何かをアニメーションさせるべきかどうか、モーションのデザインやレビュー、スプリング、ジェスチャーやドラッグ、実機のスマートフォンでの確認には、Emil Kowalski のスキル animate、review-animations、improve-animations、find-animation-opportunities、mobile-native を使用します。これらがインストールされている場合は、それぞれの作業に使用し、ここに記載された値と異なる値が指定されている場合は、その値に従ってください。インストールされていない場合は、記載されている項目に従い、項目またはタスクで求められている範囲を超えてモーションを追加しないでください。