0

開発者の大規模なチームが取り組んでいる非常に大きなプロジェクトで、スタイル シートをどのように編成するかについて、いくつかの良いアイデアを得るために、ディスカッションを開始したいと思います。

ここで考えられるアプローチの 1 つは、コメントとリージョンを使用してすべてのスタイルを整理した 1 つのシートだけを作成することです。残念ながら、タブを使用した 1 行の書き込みアプローチを使用しても、このシートは信じられないほど大きくなり、SVN のコミットと更新を行うことでさえも厄介になる可能性があります。

そのため、スタイルを別のシートに分割する方がよいと考えています。私たちにはさまざまなアイデアがあるため、これをどのように整理するかはわかりません。

  • 考えられるアイデアの 1 つは、colors.css、fonts.css、forms.css などのタイプごとに整理することです。
  • 別のアイデアは、機能/動作によってグループ化することです: navigator.css、menu.css、warnings.css、errors.css、...
  • login.css、contact.css、home.css など、ページごとに整理することもできます。
  • または、これら 3 つのアイデアを組み合わせて使用​​することもできます。

今私が心配しているのは、すべてのページにすべてのスタイルが必要なわけではなく、毎日何百万人ものユーザーがプロジェクトを使用しているため、パフォーマンスについて本当に心配しているため、すべてのページにすべてのスタイルを追加したくないという事実です。もちろん、後で展開するときに圧縮しますが、それでもページごとに必要なものだけをロードする方が賢明だと考えています。

そのため、ページやページのグループに応じて異なるシートをロードする必要があるため、他の開発者がスタイルを正しい順序でロードしないのではないかと心配しています。 (global.css の前に menu.css を読み込むと想像してください。global はいくつかのメニュー スタイルをオーバーライドします!!!)。

これで、1 つのシートだけを使用することも、すべてのシートを常にロードすることもできます。または、開発者にロード順序を伝えるためにアルファベットのプレフィックスを使用するようになったアイデアを使用することもできます。

  • a_global.css
  • a_forms.css
  • b_region1.css
  • b_anotherregion.css
  • c_page.css

しかし、それは正直に言うと少し恐ろしいように見えます。そこで、一般的な css アーキテクチャーのタイプが存在するかどうか、またはここでのプロジェクトに使用できる良いアイデアが少なくともいくつかあるかどうか疑問に思っていました。

どうもありがとう！！

4

2 に答える 2

2

  1. プリプロセッサを使用すると、ソース ファイルを自由に整理できます。(私たちのチームは LESS を使用しています。これは、Twitter Bootsrap を使い始めて動かなくなったためです)。コンパイルされた CSS ファイルはバージョン管理されるべきではありません。各開発者はテスト用に独自のバージョンをコンパイルする必要があります。生産用に縮小版をコンパイルするには、単調な作業をお勧めします。コンポーネント中心のアプローチ (フォーム、ナビゲーション、グリッド、タイポグラフィなど) を使用します。

  2. プリプロセッサを使用すると、変数とミックスインの力が得られます。共通のスタイルを定義する variables.less や mixins.less などのファイルを保持できます。したがって、その青色がわずかに明るい青色に変わったら、1 つのファイルで変更するだけです。

  3. ブラウザによってキャッシュされるため、必要なすべての CSS を含む 1 つの大きなファイルで問題ないはずです。これにより、サーバーへの HTTP リクエストが最小限に抑えられます。特定のページに多くの珍しい要素がある場合、ページ固有のスタイルシートは問題ありません。

  4. 考えられるすべての共通要素を含むスタイル ガイド HTML テンプレートを作成します。見出し、リンクの色、リスト、写真のサムネイル、フォーム入力、グリッド構成、アコーディオンなど。新しいコンポーネントを作成する必要がある場合は、このテンプレートに追加し、スタイルシートを変更して、他の要素が壊れていないかどうか、およびそれが休み。次に、これらのスニペットを使用して特定のページを作成します。

于 2013-09-09T10:18:34.193 に答える
1

SASS または LESS

これにより、コードの管理が容易になります。(変数、ミックスインなど)

複数のファイルに分割します。

常に良いアイデアです。分け方. 基本的にはページごとに分割することをお勧めします。

BUT - 一般的なスタイルを除外して、どこにでも含まれるファイルを分離します。

ところで、1 つのファイルがパフォーマンスの低下を意味するわけではありません。小さなシートに対する 10 回のリクエストは、大きなファイルに対する 1 回のリクエストよりも高速であると確信していますか? さらに、このファイルは Web ブラウザーにキャッシュされるため、1 つのファイルは悪い考えではないようです。

于 2013-09-09T10:08:02.387 に答える