6

(複雑な) Web アプリケーションに取り組んでいるときに感じた最も困難なことの 1 つは、CSS の編成です。複数のプロジェクトで試したさまざまなアプローチを次に示します。

1: Web ページ/モジュールごとに異なるスタイルシートを用意します。

当時、私たちは明らかに Web アプリに慣れていなかったので、このアプローチではスタイル シートが多すぎて、スタイルの繰り返しが多すぎました。アプリケーション全体で一貫性を保つのに苦労しました。

2: 同様の Web ページ間で共有される共通のスタイル シートを用意します。

これは、複雑になりすぎるまではうまくいきました。また、例外が多すぎて、特定のケースに合わせて一般的なスタイルを微調整する必要があることもわかりました。これを誤って行うと、アプリケーションのさまざまな部分に影響を与える可能性があり、ある時点でそれが難しくなります。また、大規模な開発チーム (さまざまなタイム ゾーンにまたがる) と厳しいプロジェクト タイムラインも、私たちの目的には役立ちませんでした。

#2 は機能しますが、それでも、私たちの製品は、私たちが望むほどの UI 品質と一貫性を持っていないことがわかりました。

非常に複雑な Web 2.0 アプリケーションで参照すべき CSS スタイル ガイドラインはありますか。他の人はどのようにスタイルシートを維持していますか?

4

6 に答える 6

3

私も似たような状況に陥ったことがあります。

まず、CSS を効果的に使用していることを確認してください。自分が CSS の絶対的なプロであるとは思えない場合は、少し時間をかけて勉強してください。冗長性が大幅に減り、より扱いやすいスタイルシートにたどり着くでしょう。

ほとんどの場合、すべてのスタイルを 1 つのファイルに統合しても、パフォーマンスに大きな影響はありません。実際、スタイルを多数のファイルに分割して、スタイルを除外しないものを確実に除外できるようにします。 used を使用すると、余分なリクエストがすべて発生するため、読み込み時間が長くなる可能性があります。しかし、ご存じのとおり、大規模な CSS ファイルはすぐにメンテナンスの頭痛の種になる可能性があります。

妥協を達成するために、このハックを検討してください。選択した言語 (私にとっては PHP) を使用して、CSS を提供します。つまり、次のようなスタイル ファイルを含めることを意味します。

<link rel="stylesheet" type="text/css" href="styles.php" />

、そのファイルのヘッダーにテキスト/CSSコンテンツタイプでそれを返させ、そのファイルを持っています

a) 複数のスタイルシートを 1 つのファイルにプルする、および/または b) さまざまなパラメーター (読み込まれるファイル、ユーザー データ、時刻など) に応じてスタイルの記述方法を変更する

A は、開発上の頭痛とページ読み込みのオーバーヘッドを軽減するための全体的な優れたソリューションです。B では、適切なファイルの有効期限を設定して、最新のアクセス時にダウンロードされたものを優先して、その時点で生成したい新しいスタイルをブラウザーが無視することを避ける必要があります。通常、静的なスタイルシートと動的に記述された要素のクラス/ID 名を使用するだけで、B で同じことを達成できるため、本当に奇妙なことをしない限り、通常は理想的なソリューションではありません。

そして、デザイナーにこの種のことについてアドバイスしてもらいます。多くの場合、私たち開発者にとって、効率的な CSS のいくつかの細かい点や、その特定の分野で訓練を受けた人々に頭を悩ませることは困難です。

于 2009-01-07T18:10:17.523 に答える
2

私はこれに何度も行ってきました。まず、初期の頃はスタイルシートにすべてを入れて作成していましたが、昔はそうではありませんでした。それから私はあなたの2番目のアプローチを決めました.最初のアプローチは幸運にも間違いだと思いました.あまりにも多くのコードと断片が浮かんでいます...

2番目のアプローチは、質問をし始めるまでは良いです...つまり：

この div の背景スタイルは、graphic.css または layout.css に入れる必要がありますか?

P の幅に関しては、フォント スタイルを fonts.css またはレイアウトに入れる必要がありますか?

アイコン位置 div を持つタイトルのマージンは、graphic.css、layout.css、または fonts.css に移動する必要があります (アイコン、テキスト、および位置に同じ宣言を使用する方が簡単です.. .)?

その後、このアプローチには何か問題があることに気付きました。

私が今していることはコメントです。多くの。

template.css -

/* ////// Headers ////// */
#header {
    width: 1004px;
    height: 243px; /* 263H-20MARG=243H */
    padding: 20px 0px 0px 0px;
    background-color: #000000;
    background-image:url('../images/redset/top1-bk.png');
    background-repeat:no-repeat;
    background-position:right top;
    clear: both;
}

/* logo */
#logo {
    background-image:url('../images/redset/wh-logo.png');
    background-repeat:no-repeat;
    width:327px;
    height: 263px;
    float: left;
    margin: -20px 0px 0px 0px;
}
#logo a {
    width:327px;
    height:263px;
}

/* Top menu & Banner */
#menuybanner {
    text-align: center;
/*  margin-right: 65px; optional*/
}
#bannerz {
    height: 152px;
    width: 653px;
    text-align: left;
    margin-right: 24px;
    /* optional: width: 100%;
    margin: 0px */
}
#bigmenu {
    text-align: left;
    margin: 18px 0px 14px 74px;
}

#bigmenu img {
    margin: 0px 22px 0px 0px;
}

もともとこれは、レイアウト、グラフィックス、テキストの 3 つの異なる CSS でした。今、私は誰もが何をしているのか知っています。

ちなみに、アーカイブの重みが増すことは知っていますが、いくつかの混合効果を実行したくないので、私の後に来てcssを読むすべての人が、私がしたこととcssを次のように理解できるはずです。

a, .b, .c, .d, #f, #2 { background-color: black; }

明らかにするのは本当に難しいです。もちろん、それを行う必要がある場合は、先に進んでください。ただし、意味をなさないためだけにグループ化されることもあります...ムードルのように...ははは。

お役に立てば幸いです。

じゃあ。

于 2009-07-21T17:20:06.300 に答える
1

CSS のカスケードの性質と、ルールが継承される方法を利用したいと考えています。

最初に最も一般的なケースをコーディングしてから、詳細を変更します。

通常のサイズのプロジェクトでは、これはまったく手に負えません。

物事をより明確に見るために、インデックス シートを使用して、そこから他のスタイルシートを呼び出すことができます。変更を加えたい場合は、どのスタイルシートに移動すればよいかがわかるため、時間を節約できます。これは私のプロジェクトの1つからの例です。

/* 
This is the CSS index page. It contains no CSS code but calls the other sheets
*/
@import url("main/reset.css");
@import url("main/colors.css");
@import url("main/structure.css");
@import url("main/html-tags.css");
@import url("main/sign-up-sign-in.css");
@import url("main/pagination.css");
@import url("main/menu-items.css");
@import url("main/teachers-list.css");
@import url("main/footer.css");
@import url("main/misc-custom-sections.css");
@import url("main/error-messages.css");

頑張って自分のスタイルを見つけてください。

于 2009-01-07T18:04:46.007 に答える
1

メイン テンプレートのスタイルを設定する mastersheet template.css を 1 つ使用します。メイン テンプレートではカバーできない個別のスタイル設定が必要なサイトでは、短い場合はサイト ヘッドに配置するか、その場合は新しいシートを作成します。

理想的には、ほとんどのケースに対応できるように template.css ファイルを柔軟に設計したいと考えています。

于 2009-01-07T18:05:49.967 に答える
0

私は通常、視覚要素ごとに CSS をグループ化し、特定のページに関連するスタイルシートのみを含めて、読み込み時間を短くするようにしています。PHP または使用する環境を使用して、必要なスタイルシートを特定のページの単一のスタイルシートに動的にマージすることは、適切なソリューションです。

私を助けてくれることの 1 つは、実際に CSS 用の疑似名前空間を作成したことです。CSS 3 が名前空間をサポートしていて、それが簡単になっていることは知っていますが、一部のブラウザーはそれをサポートしていないため、これが私が行うことです:

  1. プロジェクトに関連するフォルダーとファイルを作成します (私は Java 名前空間スタイルを使用します)。
    • 例: /css/com/mydomain/myprojectname/globalheader.css
  2. 次に、ファイル システムの場所にマップするクラス名を使用します。
    • 例: <div id='header' class='com-mydomain-myprojectname-globalheader-topClass'>
  3. css ファイルで区切り記号と適切なコメントを使用する
    • 例 /*---------------------------- リンクセクションの開始 --------------- ------*/
  4. PHP などを使用してこれらのファイルをロードし、ロード時にそれらを 1 つのスタイルシートに結合します (本当に賢い場合は、結果のシートをキャッシュできます。名前空間の規則により、クラス名間の衝突が防止されます。

設計者はこれは冗長だと考えていますが、ロード時間に影響を与えることなく、ファイル システム内の特定の css クラスを簡単に見つけることができます。また、あるデザイナー/開発者が別のクラスを上書きするという問題はありません。

于 2009-01-07T18:22:34.940 に答える
0

カスケードを適切に利用して全員を参加させ、ターゲティングの強みを最小限に抑えることができれば、css ファイルの維持は非常に簡単になります。

要素がスタイルを継承し、オーバーライドが重すぎないことを確認して、css が狂わないようにしてください。これを行うことで、レイアウト/基本スタイルとオーバーライド用に 2 つまたは 3 つのスタイル シートを持つことができます。レイアウト/ベース スタイル シートに入る内容に厳しい制御レベルを設定し、オーバーライド シートの内容を定期的に再評価して、ベースに移動できるものと単純化できるものを確認すると、自由になります。人々が自由にオーバーライドできるようにするだけでなく、クリープを制御し続けることもできます。

そこで私の理論...

于 2009-01-07T18:22:45.893 に答える