CSSアーキテクチャ：CSSファイル組織-SitePoint

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

cssファイル組織

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

CSSを複数のファイルに分割すると、チームにタスクを簡単に割り当てることができます。ある開発者はタイポグラフィに関連するスタイルに責任を負いますが、別の開発者はメッシュコンポーネントの開発に集中できます。チームは、合理的に作業を割り当て、全体的な生産性を向上させることができます。

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

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

ファイルを含める必要がある場合があります。

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

注：モードライブラリ

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

ファイルの数

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

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

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

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

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

を使用してみてください

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

Bash、PHP、Python、または選択した他のスクリプト言語で独自の接続スクリプトを書くこともできます。 type

注：CSS最適化

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

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

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

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

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

CSSファイル組織

に関するよくある質問

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS変数を使用してCSSを整理する方法は？

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

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

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

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

StylelintやCSSLINTなどの糸状LINTツールは、エラーをキャッチし、一貫したコーディングスタイルを実施することにより、CSSを整理し続けるのに役立ちます。それらを開発ワークフローに統合して、CSSを書くときに自動的にチェックできます。これにより、CSSを維持するのが簡単で、よりクリーナーを書き込むのに役立ちます。

以上がCSSアーキテクチャ：CSSファイル組織-SitePointの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。