JavaScript と CSS の同期を保つためのプラクティスはありますか?

StackOverflow https://stackoverflow.com/questions/4636322

質問

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

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

このようにして、すべての CSS が MyComponent.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 の同期を維持するには?

正しい解決策はありません

他のヒント

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

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

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

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

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

JS ファイルごとに 1 つの CSS ファイルがあることは、私にとって良いことのように思えます。すっきりしていて、理解しやすく、維持しやすいです。唯一の問題は、各ページに数十の CSS ファイルがあることですが、これらのファイルを 1 つの大きなファイルに結合すると仮定します。そのため、この問題はあなたの場合には存在しません。

JavaScript に CSS を埋め込むにはどうすればよいですか?それは、使用している環境と、ビルドプロセスの実行方法によって異なります。最も簡単な方法は、次のような大きなコメントをすべての JavaScript ファイルの先頭に置くことです。

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

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

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

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

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

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

チェックアウト スター. 。まさにこの問題を解決するために書きました。

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

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

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

説明どおりに使用することもできますが、 スター 他にもいくつかの優れた点があります。

  • スタイルシートをドライアップするためのネスト
  • 色の関数は次のとおりです darken そして saturate
  • クリアフィックス、丸い角、ドロップシャドウなどの一般的な CSS イディオム用の組み込みマクロ。
  • カスタム動作またはクロスブラウザーのサポートのための拡張ポイント

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top