インライン、埋め込み、および外部スタイルシート：ここで知っておくべきことがあります
フロントエンドのウェブサイトの開発は、3脚のスツールとして表現されることがよくあります。 これらの脚は以下の通りです：
このスツールの第2脚、CSSまたはカスケードスタイルシートは、今日ここで目にしているものです。 具体的には、ドキュメントに追加できる3種類のスタイルに対処したいと考えています。
- インラインスタイル
- 埋め込みスタイル
- 外部スタイル
これらの種類のCSSスタイルにはそれぞれ利点と欠点がありますので、それぞれを個別に詳しく見ていきましょう。
インラインスタイル
インラインスタイルは、HTMLドキュメントのタグに直接書き込まれるスタイルです。 インラインスタイルは、適用される特定のタグにのみ影響します。 次に、標準リンク、つまりアンカータグに適用されるインラインスタイルの例を示します。
このCSSルールは、この1つのリンクから標準のアンダーラインテキストデコレーションをオフにします。 ただし、ページ上の他のリンクは変更されません。 これはインラインスタイルの限界の1つです。 特定のアイテムのみが変更されるため、実際のページデザインを実現するには、これらのスタイルでHTMLを捨てる必要があります。 それはベストプラクティスではありません。 実際、それは "フォント"タグの日から取り除かれた一歩であり、ウェブページの構造とスタイルが混在しています。
インラインスタイルも非常に高い特異性を持っています。
これにより、他の非インラインスタイルで上書きすることが非常に困難になります。 たとえば、サイトを応答させて、 メディアクエリを使用して要素が特定のブレークポイントをどのように見えるかを変更する場合、要素のインラインスタイルはこれを非常に難しくします。
最終的には、インラインスタイルは実際にはあまり使用されない場合にのみ適切です。
実際には、自分のウェブページでインラインスタイルを使用することはめったにありません。
埋め込みスタイル
埋め込みスタイルは、ドキュメントの先頭に埋め込まれたスタイルです。 埋め込みスタイルは、埋め込まれたページのタグにのみ影響します。このアプローチはCSSの強みの1つを否定します。 すべてのページは
リンクの色を赤から緑に変更するなど、サイト全体の変更を行う場合は、すべてのページが埋め込みスタイルシートを使用するため、すべてのページでこの変更を行う必要があります。 これはインラインスタイルよりも優れていますが、多くの場合、まだ問題があります。
スタイルシートは、
ドキュメントのマークアップコードは、そのページにかなりの量のマークアップコードを追加するので、将来管理しにくくなる可能性もあります。
埋め込みスタイルシートの利点は、他の外部ファイルをロードする必要がなく、ページ自体ですぐに読み込むことができることです。 これは、 ダウンロード速度とパフォーマンスの観点から利点があります 。
外部スタイルシート
今日のほとんどのウェブサイトでは、外部スタイルシートを使用しています。外部スタイルは、別のドキュメントで書かれたスタイルで、さまざまなWebドキュメントに添付されます。 外部スタイルシートは、添付されているドキュメントに影響を与えることがあります。つまり、各ページが同じスタイルシートを使用する20ページのWebサイト（これは通常、どのように行われているか）を持つ場合、そのスタイルシートを編集するだけでそれらのページを表示できます。
これにより、長期的なサイト管理がずっと簡単になります。
外部スタイルシートの欠点は、これらの外部ファイルをフェッチして読み込むためのページが必要であることです。 すべてのページがCSSシート内のすべてのスタイルを使用するわけではありませんので、実際に必要なページよりもはるかに多くのページが読み込まれます。
外部CSSファイルにはパフォーマンスヒットがあるのは間違いありませんが、確実に最小限に抑えることができます。 現実的には、CSSファイルは単なるテキストファイルなので、一般的にそれほど大きくはありません。 サイト全体で1つのCSSファイルが使用されている場合は、最初に読み込まれた後にそのドキュメントがキャッシュされるという利点も得られます。
つまり、最初のページでは一部の訪問でパフォーマンスが低下する可能性がありますが、その後のページではキャッシュされたCSSファイルが使用されるため、ヒットすると無効になります。 外部CSSファイルは、私がどのように私のすべてのWebページを構築するかです。