2017-12-13 15 views
0

私はCSSを専門とするWeb開発者ではありません。私たちは最近Angularを使い始めました。私はAngularテンプレートにスタイルを適用するのがベストプラクティスであると思っています。 私たちが行っている議論は、外部CSSファイルを使うのか、内部のスタイルタグを使うのかということです。あまりにも多くのテンプレートがなく、それぞれのテンプレートは主に独自のスタイルを持っています。外部のCSSファイルや内部スタイルの間で議論しています。 誰かがこのテーマについて専門家の意見を述べています。角度1.xテンプレート - CSSスタイルを使用するためのベストプラクティス

+1

ファイルを使用します。それらをたくさん持ち、ビルドプロセスを使用してそれらを1つのファイルに統合して縮小することができます。 – charlietfl

答えて

0

内部スタイルは、それらを含むページにのみ適用されます。そのため、複数のページで共通のスタイル設定(メニューなど)を更新する場合は、各ページを個別に更新する必要があります。

特定のスタイルを複数のページに共通する要素に適用する場合は、間違いなくに外部スタイルシートを選択します。これにより、ページAとBの両方が単一のstyle.cssまたは類似のファイルからスタイルを継承することができます。

<link href="style.css" rel="stylesheet"> 

をそして、あなたは複数のページのスタイリングを更新したいときにだけstyle.cssを更新する必要があります。

このように、あなたは、各ページの<head>における単一のコード行に関連するすべてのスタイルを読み込むことができます。

+0

まあ、私はこれらのスタイルのほとんどが彼らのテンプレートにユニークになると言いました。しかし、確かに、一般的なものは、グローバルなCSSファイルに入るだろう。私たちの議論は、私たちが内部的なCSSをまったく使用するべきかどうかということについてのものでした。私は個人的には、1つのテンプレートでのみ使用されるスタイルがグローバルCSSに入るはずであると確信していません。 – ASon

+0

1つのCSSファイルだけを使用することをお勧めします。このような場合は、単一の隔離されたフォルダにビュー、コントローラ、および関連するスタイルを保存することをお勧めします。コンパイラを使用してさまざまなCSSファイルをコンパイルして、1つのグローバルCSSファイルに戻します。このようにして、CSSファイルはコード構造内で簡単に分離されます。 –

0

Angularは、スコープされたCSSをv1.5からアップしています(コンポーネントが導入されたとき - 私は信じています)。良いコンセプトですが、中小アプリでは違いが目立ちません。スコープ付きCSSを使用する方法を知っているツール(Webpackなど)との組み合わせでのみ、スコープ付きCSSの使用を検討する必要があります。

ウェブパックを使用していない場合は、クラシックモデル(1つの大きなスタイルシート)に固執してください。


技術的には、関係なく、スタックの注意、あなたは(FOUCせずに最速のロード時間)可能な限り最高の体験を提供したい場合は、インラインで上記のすべての-倍と一般的なレイアウト-INGのスタイルを置きたいです、好ましくはヘッド<style>タグと、非同期にロードされたスタイルシート内のすべてのものである。

this articleを読み込み、CSS非同期を読み込んでください。

関連する問題