ティファニー?ブラウンが書(shū)いた本「The Master of CSS」からの抜粋から抜粋。この本は世界中の書(shū)店で入手できます。また、ここで電子書(shū)籍バージョンを購(gòu)入することもできます。

cssファイル組織

優(yōu)れたCSSアーキテクチャの一部は、ファイル組織にあります。単一の開(kāi)発者または非常に小さなプロジェクトの場(chǎng)合、単一のファイルで十分です。大規(guī)模なプロジェクト（複數(shù)のレイアウトとコンテンツタイプを備えたWebサイト、または複數(shù)のブランドが同じデザインフレームワークを共有する）の場(chǎng)合、モジュラーアプローチを使用してCSSを複數(shù)のファイルに分割する方が賢明です。

CSSを複數(shù)のファイルに分割すると、チームにタスクを簡(jiǎn)単に割り當(dāng)てることができます。ある開(kāi)発者はタイポグラフィに関連するスタイルに責(zé)任を負(fù)いますが、別の開(kāi)発者はメッシュコンポーネントの開(kāi)発に集中できます。チームは、合理的に作業(yè)を割り當(dāng)て、全體的な生産性を向上させることができます。

では、CSSを複數(shù)のファイルに分割するための良いファイル構(gòu)造は何ですか？これは、私が最近のプロジェクトで使用したものと同様の構(gòu)造です：

• ：スタイル、境界、フォントに関連する最小ステートメントをリセットして正規(guī)化します reset.css
：フォント、フォントの重み、ラインの高さ、サイズ、タイトルとテキストのスタイル
• typography.css
：グリッドを含むページレイアウトと段落スタイルを管理
• layouts.css
：フォームコントロールとラベルのスタイル
• forms.css
：特定のスタイルをリスト
• lists.css
：テーブル固有のスタイル
• tables.css
：カルーセルコンポーネントに必要なスタイル
• carousel.css
：アコーディオンコンポーネントのスタイル
• accordion.css または

ファイルを含める必要がある場(chǎng)合があります。

この構(gòu)造では、各CSSファイルには特定の範(fàn)囲で狹い範(fàn)囲があります。使用するファイルの數(shù)は、Webサイトの設(shè)計(jì)が必要な視覚パターンまたはコンポーネントの數(shù)によって異なります。 _config.scss FoundationやBootstrapなどのCSSフレームワークは、このアプローチを使用します。両方とも、進(jìn)行狀況バー、範(fàn)囲入力、クローズボタン、ツールチップに個(gè)別のファイルを使用して、非常に細(xì)いです。これにより、開(kāi)発者はプロジェクトに必要なコンポーネントのみを含めることができます。 _config.less

注：モードライブラリ

この方法でCSSを複數(shù)のファイルに分割することに密接に関連する概念は、スキーマライブラリです。アンナ?デベナムの「パターンライブラリの初心者」は、このトピックの素晴らしい紹介です。

ファイルの數(shù)

開(kāi)発中に複數(shù)のCSSファイルを使用している場(chǎng)合でも、この形式のブラウザにすべてのファイルを提供するわけではありません。必要なHTTPリクエストの數(shù)は、當(dāng)社のWebサイトの読み込みが遅くなります。代わりに、より小さなCSSファイル

を、生産環(huán)境で使用するためにいくつかの大きなファイルに接続します。

このコンテキストでは、接続とは複數(shù)のファイルを単一のCSS負(fù)荷に結(jié)合することを意味します。 A 要素の必要性を排除します?，F(xiàn)在のブラウザには、一度にダウンロードできるファイルの數(shù)に制限があります。接続を使用してネットワークリクエストの數(shù)を減らすことができ、ユーザーにコンテンツをより速く配信できます。 @import link通常、Web開(kāi)発フレームワークは、Ruby on Railsなどの資産管理機(jī)能の一部として接続を処理します。一部のコンテンツ管理システムは、コア機(jī)能であろうとアドオンであろうと、同じことを行います。第9章で説明されているプリプロセッサも接続を容易にします。プリプロセッサも開(kāi)発フレームワークもワークフローの一部でない場(chǎng)合、オペレーティングシステムには使用できる接続ユーティリティがあります。

Mac OS XまたはLinuxの場(chǎng)合、ユーティリティを使用してファイルに接続します。

Windowsを使用していますか？ catユーティリティ：

を使用してみてください

cat file1.css file2.css > combined-output-file.css

Bash、PHP、Python、または選択した他のスクリプト言語(yǔ)で獨(dú)自の接続スクリプトを書(shū)くこともできます。 type

注：CSS最適化

type file1.css file2.css > combined-output-file.css

接続は、CSS最適化の側(cè)面です。また、不要な文字やスペースを削除するには、ファイルを最小限に抑えることも重要です。第3章では、最小化ツールを紹介します。

では、いくつのファイルを使用する必要がありますか？これはトリッキーな場(chǎng)所です。現(xiàn)在のベストプラクティスは、重要なパスCSS（ページレンダリングに必要なCSSの最小額）を特定し、

要素を使用してページに埋め込むことです。他のCSSファイルは、JavaScriptを使用してロードする必要があります。 Addy Osmaniのプレゼンテーション「CSS Performance Tools」は、このテクノロジーの優(yōu)れた概要と、実裝に使用できるツールの一部を提供します。フィラメントグループのLoadCSSも參照してください。

SPDYまたはHTTP/2プロトコルを使用してコンテンツが提供される場(chǎng)合、接続は不要になる可能性があります。 HTTP/1.1を使用して、ブラウザは次のリクエストを順?lè)衰昆Ε螗愆`ドします。このモデルでは、ネットワークリクエストの數(shù)を減らすと、Webサイトのパフォーマンスが向上します。したがって、リクエストの數(shù)を減らすことは実際的な利點(diǎn)はありません。ただし、ページのレンダリングに必要なよりも多くのバイトを送信するコストがあります。ウィリアム?チャンの「HTTP/2ノートとトレードオフ」は、これをより詳細(xì)に説明しています。最良の方法は、サーバーがHTTP/2サービスを提供しているかどうかを判斷し、その場(chǎng)合、より多くのユーザーが実際に資産を分割してページに必要な資産のみをロードすることで利益を得るかどうかを確認(rèn)するか、古い方法を使用し続けることです。パフォーマンスの最適化方法についてもっと知りたい場(chǎng)合は、SetePointの本Leanサイトは有用なリソースです。

CSSファイル組織

に関するよくある質(zhì)問(wèn)

CSSファイルを最適に整理する方法は？

CSSファイルを整理する最良の方法は、プロジェクトのサイズと複雑さに大きく依存します。小規(guī)模なプロジェクトでは、単一のCSSファイルで十分かもしれません。ただし、大規(guī)模なプロジェクトでは、CSSを複數(shù)のファイルに分割することをお?jiǎng)幛幛筏蓼?。これは、それらをスタイリングするコンポーネントまたはページに基づいて実行できます。たとえば、ヘッダー、フッター、メインコンテンツのCSSファイルを個(gè)別に作成できます。これにより、コードの維持とデバッグが容易になります。

CSSコードをシンプルで整然と保つ方法は？

CSSコードをシンプルで整然と保つことは、保守性のために不可欠です。いくつかのベストプラクティスに従うことでこれを行うことができます。まず、コメントを使用して、CSSの各部分の役割を説明します。第二に、関連するスタイルを結(jié)合します。第三に、クラスとIDに一貫した命名規(guī)則を使用します。最後に、SASS以下のようなCSSプリプロセッサを使用して、スタイルシートを管理するのに役立つことを検討してください。

CSSプリプロセッサとは何ですか？また、CSSファイルの整理にどのように役立ちますか？

SASS以外のようなPREPROCESSORSは、CSS機(jī)能を拡張するスクリプト言語(yǔ)です。変數(shù)、ネストされたルール、ミキシン、機(jī)能を使用することができます。これにより、CSSを大幅に簡(jiǎn)素化し、維持を容易にすることができます。プリプロセッサは、ブラウザが理解できる標(biāo)準(zhǔn)のCSSにコードを編集します。

CSSモジュールを使用してCSSを整理する方法は？

CSSモジュールは、CSSをよりモジュール化し、再利用可能にする方法です。 CSSモジュールでは、アプリケーションの各コンポーネントには獨(dú)自のCSSファイルがあります。これにより、1つのコンポーネントのCSSを変更しても他のコンポーネントに影響を與えないため、スタイルの管理が容易になります。 CSSモジュールを使用するには、Webpackや小包などのビルドツールが必要です。

CSSファイル組織におけるコメントの役割は何ですか？

注釈は、CSSファイルの組織化に重要な役割を果たします。彼らはあなたと他の開(kāi)発者がCSSの各部分の役割を理解するのを助けることができます。これは、複數(shù)のCSSファイルがある可能性があるため、大規(guī)模なプロジェクトで特に重要です。コメントを使用して、デバッグ中にCSSの特定の部分を一時(shí)的に無(wú)効にすることもできます。

CSSフレームワークを使用してCSSを整理する方法は？

BootstrapやFoundationなどのFrameworksは、Webサイトのスタイルに使用できるWrite-PRE-CSSを提供します。また、CSSに統(tǒng)一された構(gòu)造を提供して、維持を容易にします。ただし、CSSフレームワークを使用すると、ほとんどの機(jī)能を使用していない場(chǎng)合は、Webサイトに不必要な膨満感が追加される場(chǎng)合があることを忘れないでください。

CSSにおける一貫した命名規(guī)則の重要性は何ですか？

CSSでの一貫した命名規(guī)則により、コードが読みやすくなり、理解しやすくなります。また、コードを更新またはデバッグする必要がある場(chǎng)合に、特定のスタイルを簡(jiǎn)単に見(jiàn)つけることができます。 BEM（ブロック、要素、修飾子）、OOCSS（オブジェクト指向CSS）、SMACS（スケーラブルおよびモジュラーCSSアーキテクチャ）などのいくつかの命名規(guī)則に従うことができます。

CSS変數(shù)を使用してCSSを整理する方法は？

CSS変數(shù)（カスタムプロパティとも呼ばれます）を使用すると、CSS全體の再利用のために特定の値を保存できます。これにより、CSSが大幅に簡(jiǎn)素化され、維持が容易になります。たとえば、ウェブサイトのメインカラーを変數(shù)として保存し、その色が必要なときに使用できます。

CSSファイル組織におけるCSSリセットの役割は何ですか？

CSSリセットは、CSSの開(kāi)始時(shí)に適用される一連のスタイルであり、ブラウザアプリケーションのデフォルトスタイルをリセットするために使用されます。これにより、あなたのウェブサイトが異なるブラウザで一貫性があるようになります。また、CSSリセットにより、各要素のブラウザスタイルを書(shū)き直す必要がないため、CSSの管理が容易になります。

CSS Lintツールを使用してCSSを整理する方法は？

StylelintやCSSLINTなどの糸狀LINTツールは、エラーをキャッチし、一貫したコーディングスタイルを?qū)g施することにより、CSSを整理し続けるのに役立ちます。それらを開(kāi)発ワークフローに統(tǒng)合して、CSSを書(shū)くときに自動(dòng)的にチェックできます。これにより、CSSを維持するのが簡(jiǎn)単で、よりクリーナーを書(shū)き込むのに役立ちます。

以上がCSSアーキテクチャ：CSSファイル組織-SitePointの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。