応用

CSS · 上級 - 高度なパターンとパフォーマンス

• CSS変数とcalc/clamp関数カスタムプロパティ、それがカスケードの中で実行時にどう解決されるか、そして流動的なインターフェースのためのcalc()関数とclamp()関数をマスターしましょう。
• トランジションとアニメーション：@keyframes、transform、タイミングtransformとopacityでコンポジタ上でアニメーションさせ、@keyframesを構造化し、ユーザーのモーション設定を尊重しましょう。
• モダンなセレクタ：:has、:is、:where、高度な:nth-child最近の機能的擬似クラスを活用して、コンテンツに基づいて選択し、詳細度を膨らませずにセレクタをグループ化し、複雑なパターンをターゲットにしましょう。
• CSSアーキテクチャ：BEM、ユーティリティファースト、ファイル構成BEMとユーティリティファーストのアプローチ、チームにおける実際のトレードオフを比較し、カスケードレイヤーでファイルを構造化しましょう。
• コンテナクエリとCSSネスティングビューポートではなくコンテナに対してコンポーネントをレスポンシブにし、ネイティブなネスティングでスタイルシートを構造化しましょう。