最新のCSS設(shè)計(jì)を習(xí)得するための鍵は、レイアウト、応答性、保守性です。 1。CSSグリッドとフレックスボックスを使用して、レイアウトを組み合わせます。グリッドは、ページ全體などの2次元構(gòu)造に適しており、FlexBoxはボタングループなどの1次元配置に適しています。 2。CSS変數(shù)を使用して、テーマの切り替えを?qū)g現(xiàn)し、JavaScriptを使用した色変數(shù)と動(dòng)的スイッチングを定義します。 3。モバイル優(yōu)先順位と対応の詳細(xì)を処理し、相対ユニットを採(cǎi)用し、寫(xiě)真SRCSET屬性と集中メディアクエリを採(cǎi)用します。 4.メンテナビリティを改善し、BEMおよびその他の命名仕様を使用し、モジュールを分割し、ネストレベルを制御し、個(gè)別のコンポーネントとレイアウトスタイルを使用します。これらの手法の組み合わせは、コードの品質(zhì)を大幅に改善できます。

CSSを最新のWebデザインで書(shū)くとき、キーは、セレクターやアニメーションの屬性の數(shù)をマスターするのではなく、レイアウト、応答性、保守性を理解することです。多くの人々は、基本的なCSSを?qū)Wんだ後に立ち往生し、より柔軟でモダンなスタイルのコードを書(shū)く方法を知りません。この記事では、このボトルネックを突破するのに役立ついくつかの高度で実用的なテクニックについて説明しています。

CSSグリッドとFlexBoxとの組み合わせレイアウト

FlexBoxは、1次元レイアウト（ナビゲーションバー、ボタングループなど）に優(yōu)れていますが、グリッドは2次元レイアウト（ページ構(gòu)造全體など）により適しています。 2つは代替関係ではなく、補(bǔ)完的な関係です。

実用的な例を示すには、左側(cè)にサイドバーと右側(cè)にコンテンツ領(lǐng)域があるダッシュボードページを作成します。グリッドを使用して、構(gòu)造全體を分割できます。

 .Dashboard {
  ディスプレイ：グリッド;
  Grid-Template-Columns：250px 1fr;
}

次に、コンテンツ領(lǐng)域のFlexBoxレイアウトカードコンポーネントを使用します。

 .cards {
  ディスプレイ：Flex;
  ギャップ：1rem;
  フレックスラップ：ラップ;
}

この組み合わせは、全體的な構(gòu)造を明確にするだけでなく、內(nèi)部要素をより柔軟にします。

提案：

• 最初にグリッドを使用して、大きな領(lǐng)域を分割します
• 次に、FlexBoxを使用して、エリア內(nèi)の要素配置を処理します
• 1つの解決策だけで問(wèn)題を解決するように強(qiáng)制しないでください

トピックスイッチングを?qū)g現(xiàn)するためのCSS変數(shù)の柔軟な使用

CSSカスタムプロパティ（つまり、変數(shù)と呼ばれることが多い変數(shù)）は、重複する値を少なくするだけでなく、スタイルを動(dòng)的に制御することです。

たとえば、色変數(shù)のセットを定義できます。

 ：根 {
  -primary-color：＃4a90e2;
  -bg-color：＃f5f5f5;
}

次に、コンポーネント內(nèi)のこれらの変數(shù)を參照してください。

 。ボタン {
  バックグラウンドカラー：var（ - プライマリカラー）;
}

テーマを変更したいですか？変數(shù)値を変更するだけです。

 .dark-theme {
  -Primary-Color：＃6EC1FF;
  -bg-color：＃1a1a1a;
}

JavaScriptと相まって、クラス名を動(dòng)的に切り替えると、ナイトモード/デイモード間のワンクリックスイッチングを?qū)g現(xiàn)できます。

ヒント：

• フォーカス変數(shù):rootまたはトピックのクラス管理
• メディアクエリでダークモードを自動(dòng)的に認(rèn)識(shí)します
• PostCSSプラグインを使用して、古いブラウザと互換性があります

モバイルファーストレスポンシブデザインの詳細(xì)な処理

「Mobile First」はもはや新しい概念ではありませんが、多くの人はMeta Viewportタグを追加して完了します。真にレスポンシブなデザインでは、ブレークポイントの設(shè)定、フォントの適応、畫(huà)像スケーリング、その他の側(cè)面を考慮する必要があります。

推奨されるプラクティスは次のとおりです。

• 小さな畫(huà)面からスタイルを書(shū)き始め、徐々にそれらを強(qiáng)化します
• 相対ユニット（EM/REM/VW/VH）を使用する
• 畫(huà)像はsrcsetとmax-width: 100%のあるsizes屬性と一致しています：100％
• メディアクエリは、個(gè)々のファイルではなく、コンポーネント內(nèi)に集中する必要があります

たとえば、レスポンシブ畫(huà)像コンポーネントは次のように書(shū)くことができます。

 <img 
  src = "small.jpg" 
  srcset = "small.jpg 480w、medium.jpg 800w、large.jpg 1200w"
  サイズ= "（Max-Width：600px）100VW、800px"
  alt = "例の畫(huà)像"
/>

このようにして、ブラウザは、デバイスの幅に応じてロードするために最も適切な畫(huà)像を自動(dòng)的に選択し、トラフィックを節(jié)約し、パフォーマンスを改善します。

メンテナンスが簡(jiǎn)単なCSS構(gòu)造を書(shū)き出す

プロジェクトが大きくなるにつれて、CSSは簡(jiǎn)単に亂雑になります。後の段階で「大膽に削除することはない」という問(wèn)題を回避するために、最初から組織の方法に注意を払うことをお?jiǎng)幛幛筏蓼埂?/p>

一般的な慣行は次のとおりです。

• BEMやSMACSなどの命名仕様を使用します
• cssをモジュール（ _buttons.scss 、 _layout.scssなど）に分割します
• 過(guò)度のネストを避け、3層以內(nèi)のレベルを制御する
• コンポーネントスタイルとレイアウトスタイルは別々に書(shū)かれています

TailwindやBootstrapなどのツールファーストフレームワークを使用している場(chǎng)合は、ユーティリティクラスに頼ってそれを構(gòu)築しないように注意してください。いくつかの再利用クラスを適切に抽象化すると、コードがより明確になります。

基本的にそれだけです。高度なCSSは、クールな機(jī)能を使用する必要があることを意味するものではありませんが、明確な構(gòu)造、強(qiáng)力なスケーラビリティ、便利なメンテナンスを備えたスタイルコードを作成するためにいつ、どのような方法を使用するかを知っています。多くのテクニックはシンプルに思えますが、組み合わせると、それらは最新のWebデザインの鍵です。

以上が最新のWebデザインのための高度なCSSチュートリアルの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。