5

私は大規模な JavaScript を多用するアプリに取り組んでいます。JavaScript のいくつかの部分には、関連する CSS 規則がいくつかあります。私たちの現在の慣行は、次のように、各 JavaScript ファイルにオプションの関連する CSS ファイルを含めることです。

MyComponent.js  // Adds CSS class "my-comp" to div
MyComponent.css // Defines .my-comp { color: green }

このようにして、に関連するすべての CSSMyComponent.jsがMyComponent.css.

しかし問題は、これらのファイルに CSS がほとんど含まれていないことがあまりにも多いということです。また、数行の CSS だけでファイル全体を作成するのは大変だと感じることがよくあります。スタイルを JavaScript 内にハードコーディングする方が簡単です。しかし、これはダークサイドへの道だろう...

最近、CSS を JavaScript 内に直接埋め込むことを考えていました。そのため、ビルド プロセスで抽出して 1 つの大きな CSS ファイルにマージすることができます。そうすれば、CSS の小さな部分ごとに新しいファイルを作成する必要がなくなります。さらに、JavaScript ファイルを移動/名前変更/削除するときに、CSS ファイルをさらに移動/名前変更/削除する必要はありません。

しかし、JavaScript 内に CSS を埋め込むにはどうすればよいでしょうか? 他のほとんどの言語では文字列のみを使用しますが、JavaScript には複数行の文字列に関するいくつかの問題があります。以下は私見がかなり醜いように見えます：

Page.addCSS("\
  .my-comp > p {\
    font-weight: bold;\
    color: green;\
  }\
");

JavaScript と CSS の同期を維持するために、他にどのような方法がありますか?

4

4 に答える 4

2

JSファイルごとに1つのCSSファイルを持つことは私にとって良いことのように思えます。清潔で、理解しやすく、保守も簡単です。唯一の問題は、すべてのページに数十のCSSファイルがあることですが、これらのファイルを1つの大きなファイルに結合すると思われるため、この問題は発生しません。

CSSをJavaScriptに埋め込む方法は？それはあなたが持っている環境とビルドプロセスがどのように行われるかに依存します。最も簡単なのは、すべてのJavaScriptファイルの先頭に次のような大きなコメントを付けることです。

// <...>Your copyright notice here</...>

// <css>
/*
body{color:red;}
div{border:solid 10px lime;}
// ... other ugly styles.
*/
// </css>

<css>...</css>次に、ビルド中に、ブロックを検索し、とをトリミングしてCSSを抽出する必要が/*あり*/ます。

もちろん、問題が発生します。オートコンプリートを備えたIDEを使用している場合、CSSをJavaScriptファイルに埋め込むと、この場合はオートコンプリートを使用できなくなります。

于 2011-01-08T21:54:36.220 に答える
2

CSS ファイルに対する私の見解は、アプリケーションのテーマを定義するルールを記述するというものです。一般に、ベスト プラクティスでは、テーマを比較的簡単に変更できるように、コンテンツ、プレゼンテーション、および動作を分離する必要があると述べられています。複数の CSS ファイルを使用すると、デザイナーが処理するファイルが増えるため、これは少し難しくなります。

さらに、CSS (Cascading StyleSheets) ルールは、CSS ドキュメント内の位置によって影響を受けます。それぞれに異なるルールを持つ複数の CSS ファイルがあると、どのルールを優先するかの優先順位付けが難しくなる場合があります。

最後に、JS ファイル内のどの CSS セレクターがどの CSS ファイルと一致するかを知りたい場合は、Linux を使用している場合は、grep などのクールな検索ツールを使用してみてください。優れた IDE を使用している場合は、それを使用してルールをすばやく検索し、行番号にジャンプすることもできます。CSS ルールを別のファイルに保持するメリットはまったくありません。問題を複雑にするだけです。

さらに、CSS をインラインに配置するという考えに反対することをお勧めします。これを行うと、必然的に、Web デザイナーがスタイルをすばやく簡単に交換することが難しくなります。外部 CSS の要点は、Web デザイナーがテーマを変更したり、さまざまなユーザーに複数のテーマを提供したりできるようにすることです。CSS を JavaScript または HTML に埋め込むと、コンテンツ、動作、およびプレゼンテーションが緊密に結合されます。

一般に、ベスト プラクティスでは、まさにこの目的のために、コンテンツ、動作、およびプレゼンテーションを分離することをお勧めします。

于 2011-01-08T21:52:15.867 に答える
1

Cssterをチェックしてください。この問題だけを解決するために書きました。

JavaScript オブジェクト リテラル構文を使用して、CSS ルールを直接 Javascript に埋め込みます。生のCSSよりも醜いものではありません。

Csster.style({
  h1: {
    fontSize: 18,
    color: 'red'
  }
});

ルールは、クライアント側の DOM に挿入されます。このアーキテクチャにより、ビルド プロセスが簡素化され、クライアント リクエストが削減されます。

説明したように使用できますが、Cssterには他にもいくつかの優れた点があります。

  • DRY up スタイルシートへのネスト
  • darkenとのような色関数saturate
  • clearfix、角丸、ドロップ シャドウなどの一般的な CSS イディオムの組み込みマクロ。
  • カスタム動作またはクロスブラウザー サポートのための拡張ポイント

十分にテストされており、かなりの数のプロジェクトで使用しています。jQuery とは独立していますが、うまく機能します。

より多くの方にご利用いただき、フィードバックをいただければ幸いです。

于 2011-01-08T23:49:24.870 に答える
1

私が推奨する方法は、すべての CSS ファイルを個別に保持し、展開時にそれらをより大きな CSS ファイルにコンパイルするビルド プロセスを用意することです。

JS を CSS とマージすることは避けたいと思います。ファイル レベルから見ると、よりクリーンなソリューションのように聞こえるかもしれませんが、すぐに面倒になると思います。そうなると、エディターが提供する強調表示と構文の支援が失われます。

于 2011-01-08T21:52:45.287 に答える