2017-10-14 21 views
1

私は最近、私のウェブサイトでEJSテンプレートをもっと使い始めたので、トップのナビゲーションバーやその他のものを自分のテンプレートに分けたようなことをやったことがあります。それを使ってCSS(またはより具体的にはSCSS)を整理するための標準的な方法はありますか?私はちょうどそのテンプレートのスタイルだけで各テンプレートの一致するSCSSを作成し、テンプレートを使用する各ページに<link/>を追加する必要がありますか?または、ちょうど私はちょうどちょうど<style/>タグをそこにCSSでテンプレート自体に追加します。これには標準的なパターンがありますか?EJSテンプレートにCSS用の標準パターンはありますか?

答えて

1

良い質問です。私は答えが「いいえ」だと思っています。

私の「仕事の指導者」のアドバイスは常に私に良いアドバイスです。彼は「維持するのが最も簡単なことをする」と言います。これはあなたのプロジェクトによって異なります。 、のように、最も簡単な提案であるテンプレート

あたり

つのスタイルシート:私は、カップルの一般的な戦略を考えることができます。おそらく最も簡単に開発することができ、各ページは必要最小限のスタイルをもたらすでしょう。

しかし、これにより、スタイルを再利用することはかなり不可能になります。 .myclassのスタイルを必要なすべてのシートに再組み込みせずに、テンプレートに<button class="myclass">を埋め込むことはできません。また、スタイルシートを自動化したい場合(生産用に縮小または連結するなど)、よくあることですが、ここからはそれほど可能ではありません。

もう1つ不利な点がありますが、予期しない発注の影響があります。あなたの "widget.css"があなたの "article.css"の後にDOMに追加されてしまうような場合は、以前のDOMに登場していた場合とは異なるスタイルでスタイルを上書きすることができます。

すべてのページのすべてのスタイル

繰り返しますが、これはいいと簡単です。すべてのページにはすべてのスタイルシート(またはたぶん1つの巨大なシート)が含まれています。外部レイアウトテンプレートで一度リンクすることができます。縮小化を自動化するのは簡単で、オーダースタイルシートに関連する驚きはありません。

明らかに欠点は、各ページに持ち込まれていないスタイルがたくさんあることです。しかし、CSSはサイズに関してかなり "安い"ので、これは悪い欠点ではないかもしれません。

はどこか

の間のすべてのページにいくつかのスタイルを含めて、いくつかのページ固有またはテンプレート固有のいずれかを行います。現実的には、これはおそらくほとんどのアプリケーションがやっていることでしょう。

再利用することを意図したユーティリティスタイル(ex button.bigredform.orderformなど)だけでなく、ブートストラップなどの依存関係も普遍的に含めることができます。私はまたあなたのページの半分以上(あなたのnavbarのためのスタイル)に必要なスタイルを含めることをお勧めします。

1つの特定のページを対象とする他のスタイルを、リンクを介して直接そのページに追加することができます。

最後のノート、私は理由のカップルのためのhtmlで<style>タグを回避しようと

:そうすることを残して、JSライブラリの

  • ロット動的に追加したり、DOMに<style>タグを削除間違いや重複を避けるためにスペースを空けてください。
  • テンプレート内のページに動的スタイルやユーザー管理スタイルを追加するのに適しています。
+0

テンプレートに「