複雑なCSSフレームワーク、あなたが何かにコバンで学ぶことができません。
私の第四の仕事のインターネット業界、CSS / HTMLの専門家で大手ニュースメディア会社で私たちの国にサービスを提供している、私の主な責任は、マルチサイトアーキテクチャのための再利用可能な、拡張性の高い、CSSを開発することです。
この記事では、私は私はあなたとマルチサイトの知識と経験を構築するためのアーキテクチャの分野で蓄積し共有することになります。
注意：現在、このプロジェクトは、通常のCSSプリプロセッサで使用されます。この記事では、私はサスプリプロセッサを使用します。
層を持つ世界の構築
あなたは、大規模なプロジェクトの開発を開始する前に、我々は全体的な状況を見て必要があり、一般的な複数のサイトが抽出されました。高層の建物はレンガでレンガに始まり、プロジェクトの礎石はように混合正規のスタイル、（ミックスイン）、一般的なアイコンと部分モジュール層（要素、構成要素、グラフィックス・ロジック、エンティティページ......など）とのです。
共通のベース層に書き込まれたスタイル、そして独自のパターンに対応する層に書かれた - 複数のプロジェクト（すなわち、複数の部位）通常動作のためのために、我々は排他的なスタイルで多彩なスタイルであり、これはスタイルを決定する必要があります。これは強烈の探求と実践の完全な道です。視点の変化は、私たちは受け入れられないと思ったまで、層によってスタイルのコード層を移動する必要があり、これは一般的であるときはいつでも。
この原理を理解した後、我々は基礎としてグローバルレベルを構築するために始めることができます。このグローバル層は、全体のマルチプロジェクト（複数の部位）の出発点です。
図の次の例では、その時に私達に私達の会社のプロジェクトのニーズを明らかにしました。
特定のグリッドレイアウトは、すべてのサイトに適用された場合にのみ、CSSの初期化が含まれている軽量のベース層、基本SASSのミックスイン、一般的なアイコン、一般的なフォント（のため）だけでなく、機能クラスを、維持するために、それは一般的なグリッドとして追加されますベース層へ。_partials.scss層（要素、構成要素、等）において、我々は、主に使用されるこのようなポップな局所、ジェネリック形態および一般タイトルなどの一般的なモジュールが含ま_elements.scss層、等です 私たちは、それがすべて（あるいはほとんど）であるスタイルに基づいて下地パターンの共通部品を追加する必要があります。（フォルダとファイル構造の詳細については、私の以前の記事を参照してください）
複数のレイヤーを整理する方法
2つのプライベートファイル（ローカルスタイルファイルと設定ファイル、彼らはCSSファイルにコンパイルされることはありませんので、プライベートと呼ばれる）と公開ファイル（この：私たちのアーキテクチャでは、それぞれの層は、少なくとも3つのファイルが含まれていますマスターファイルレベル）。各層の_Config.scssプロファイルは、典型的には、変数を含みます。_local.scssファイルには、現在の層のためのコントローラとして機能または管理者の役割をパッケージ化、スタイルの内容が含まれています。第3のファイル（レイヤname.scss）は前二者を呼び出します。
層-name.scssファイル：
@import「設定」;
@import「ローカル」;
別のは私たちに可能な限り、各ファイルとしては、より小さな部分（小さなファイル）に分割され、原則の独自のセットを与えます。この原則は、再構成を行うことは非常に簡単です。
各レイヤでは、層のいくつかは、「仮想アイテム」で表現される場合でも、唯一の層name.scssコンパイルそのファイルを保証しなければならない（図の例では、上述のように、「基本レイヤフレーム」）。
プライベートファイルの単一のファイルにコンパイルされていないために、私たちは、ファイル名の接頭辞としてアンダースコア（_）を使用します。ここで下線だけでは存在しません。このファイルを表します。
注意：プライベートファイルをインポートするとき、私たちは、ファイル名の接頭辞持参下線を記述する必要はありませんとき。
層アーキテクチャの例：
このような長いフォルダ構造：
サス/
|
| -ベース・レイヤ/
| -設定/
| -ローカル/
| - _config.scss
| - _local.scss
| -ベース・layer.css（レイヤースタイルがコンパイル）
| -ベース・layer.scss
継承
我々が開始するために、ベース層からプロジェクトを作成するとします。私たちは、Zhaomaohuahuクローンが出て設定し、新規プロジェクトの名前で、ベース層のフォルダの内部構造を必要とします。その後のケースでは、継承されたプロジェクトと呼ばれるこの新しいプロジェクトを置きます。
ヒント：サスのルートディレクトリにすべての層のディレクトリとプロジェクトディレクトリを置きます。
プロジェクトファイルには、少なくとも1つの_config.scss、_local.scssファイルや、このファイルサスコア層が含まれている - この場合の遺伝-project.scssです。
すべてのレイヤーとプロジェクトはサスのルートディレクトリにあります。
| SASS / |
- ベース層 |
- 設定/ |
- 地元/ |
- _config.scss |
- _local.scss |
- ベースlayer.css（層の形態がコンパイル） |
- ベース - layer.scss | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| - 継承プロジェクト | ||||||||||||||
| - 設定/ | ||||||||||||||
| - 地元/ | ||||||||||||||
| - _config.scss | ||||||||||||||
| - _local.scss | ||||||||||||||
| - 継承-project.css（層の形態がコンパイル） | ||||||||||||||
| - 継承 - project.scss |
プロジェクトの継承プロジェクトプロファイルは、ベース層のプロフィールを紹介します。その結果、私たちは、新しい変数を追加することができたり、既存の変数に、親（ベース層）をオーバーライドします。
次はの継承されたプロジェクト/ _config.scssの例です。
/ ベースレイヤー構成情報をロード /
@import「../base-layer/config.scss」;
/ （追加または可変オーバーライドするために必要な）ローカル設定レイヤー /
@import 『設定/ directions.scss』;
コンテンツスタイルファイル継承されたプロジェクト/ _local.scssも同じ理由：
/ インポートベースレイヤサブアセンブリ /
@import「../base-layer/local.scss」;
/ ローカルフォント /
@import 『/ローカルフォントalmoni.scss』;
/ サブアセンブリ /
@import「ローカル/要素。 SCSS「;
@import」ローカル/ components.scss「;
あなたはジェネリックとスタイルの両方の新しいレイヤーを作成したい場合は、ユニークなスタイルを持って、そのフォルダには、適切なベース・レイヤファイルからベース層のスタイルを継承します。
この層は、継承されたの-project.cssと呼ばれるCSSファイルを作成します。
層の内部変数をオーバーライドします
変数を上書きする「層」のアプローチを使用して非常に簡単です。
例えば、ベース層、青の値の$ベース色と呼ばれる変数がある（$ベース色：青）。この変数を無効にするには、我々は、ローカルファイルに_config.scssでその値を更新する必要があります。今、変数で使用されるすべてのコンポーネントは、 - 色の値を更新された変数に対応する - のいずれかで定義された基材層又は部分層から継承されました。
グローバルグローバル・ストーリー
一部のモジュールは、すべての層で使用されていないので、あなたは、ベース層でそれらを定義した場合、他の項目は、冗長なコードをインポートされます。この問題を解決するために、私は、グローバルモジュールの概念を使用して、別のルートを行ってきました。
コンセプトは、新しいルート（_partials）に配置された層の一部だけ、すべての層の外側に配置さ、この新しいルートのための手段ということです。次いで、層のいずれかは、グローバルディレクトリ_partialsにおける所望のモジュールからインポートすることができます。
次の図は、別のモジュールの一例を示しています。
各層は、グローバルカタログ_partials内の1つのまたは複数のモジュールからの要求に応じて呼び出すことができます。
グローバルディレクトリには、例を_partials：
サス/
|
| - _partials /
| -ベース・レイヤ/
| - / -プロジェクトが継承され
_partials local.scssファイルからインポートモジュール：
/ ベースレイヤサブアセンブリの導入 /
@import」../base-layer/local.scss 『;
/ サブアセンブリ /
@import『ローカル/ partials.scss』;
/ グローバルモジュール追加 /
@importを』 ../ _partials /ラスト・コネクション「、
少し余分なアドバイス
組織構造を整理する必要があります。常に最適な構造を維持するために、プロジェクトの計画のニーズを満たすための方法を覚えておきます。
同じ過ちを繰り返さないでください。あなただけが簡単に他のコンポーネントをインポートすることができ@import。例えば、いくつかのコンポーネントは、これらのコンポーネントは、関連する「ニュース」のWebサイト内の別のプロジェクトと「スポーツ」のプロジェクトで定義されている、とされています。その後、我々は@import「ニュース」のWebサイトに直接これらのコンポーネントを置くことができます。（=レベル=プロジェクトサイト）
IDEのショートカットをフルに活用します。エラーや原因の故障から自由に再構築されたエディタの選択を容易にします。
Lixinを着用することはできません。開発とその後の再建では、すべての時間は、すべてのサス・ルート・ファイル、一緒にコンパイル古いものと新しいタッチのうちそう。
概要
この記事では、私はあなたに、マルチサイトプロジェクトのためのCSSアーキテクチャを構築するための方法を表示したいと思い、このアイデアは、蓄積された知識と経験の私の年で精製しました。