インラインCSSの何がそんなに悪いのですか？
Webサイトのスターターコードと例を見ると、CSSは常に「main.css」、「default.css」、「Site.css」などの名前の別のファイルにあります。しかし、ページをコーディングするとき、画像に「float：right」を設定するなどして、DOM要素とインラインでCSSをスローしたいことがよくあります。例ではほとんど行われていないため、これは「悪いコーディング」であると感じます。
スタイルを複数のオブジェクトに適用する場合、「自分自身を繰り返さない」（DRY）に従って、各要素が参照するCSSクラスに割り当てることをお勧めします。ただし、別の要素でCSSを繰り返さない場合、HTMLを作成するときにCSSをインライン化しないのはなぜですか？
質問：インラインCSSの使用は、その要素でのみ使用される場合でも、悪いと考えられていますか？もしそうなら、なぜですか？
例（これは悪いですか？）：
<img src="myimage.gif" style="float:right" />
サイトの外観を変えたい場合は、100行のコードを変更する必要があります。あなたの例には当てはまらないかもしれませんが、次のようなことのためにインラインCSSを使用している場合
<div style ="font-size:larger; text-align:center; font-weight:bold">
各ページでページヘッダーを示すと、次のように維持するのがはるかに簡単になります。
<div class="pageheader">
ページヘッダーが単一のスタイルシートで定義されている場合、サイト全体のページヘッダーの外観を変更する場合は、CSSを1か所で変更します。
しかし、私は異端者であり、あなたの例では問題はないと言います。おそらく単一のページ上で正しく見える必要がある単一の画像の動作をターゲットにしているので、スタイルシートに実際のcssを入れるのはおそらくやり過ぎでしょう。
異なるcssファイルを持つことの利点は
- HTMLページのメンテナンスが簡単
- ルックアンドフィールの変更は簡単で、ページで多くのテーマをサポートできます。
- Cssファイルはブラウザ側でキャッシュされます。そのため、ページが更新されるたびに、またはユーザーがサイトをナビゲートするたびに、数キロバイトのデータをロードしないことにより、インターネットトラフィックに少し貢献します。
高速なCSSプロトタイピングへのHTML5アプローチ
または：<style>タグはもはや頭だけのものではありません！
CSSのハッキング
デバッグ中に、ページのCSSを変更したい場合、特定のセクションのみをより良く見せたいとしましょう。スタイルをインラインで作成する代わりに、手早く、汚く、維持できない方法で、最近私がしていることを実行して、段階的なアプローチをとることができます。
インラインスタイル属性なし
Cssをインラインで作成しないでください。つまり、<element style='color:red'>または<img style='float:right'>は非常に便利ですが、後で実際のcssファイルに実際のセレクターの特異性を反映するわけではありません。後でメンテナンスの負荷を後悔します。
代わりに<style>を使用したプロトタイプ
インラインcssを使用する場合は、代わりにページ内<style>要素を使用します。試してみてください！すべてのブラウザで正常に動作するため、テストに最適ですが、そのようなcssを必要に応じていつでもグローバルなcssファイルに移動できます。 （*セレクタはサイトレベルの特異性ではなく、ページレベルの特異性しか持たないことに注意してください。そのため、一般的すぎることには注意してください）cssファイルと同じくらいきれいです：
<style>
.avatar-image{
float:right
}
.faq .warning{
color:crimson;
}
p{
border-left:thin medium blue;
// this general of a selector would be very bad, though.
// so be aware of what'll happen to general selectors if they go
// global
}
</style>
他の人のインラインCSSのリファクタリング
時にはあなたも問題ではなく、他の誰かのインラインcssを扱っているので、それをリファクタリングしなければなりません。これはページ内の<style>のもう1つの優れた使用方法です。そのため、リファクタリング中にインラインcssを直接取り除き、クラスまたはIDまたはセレクターでページ上にすぐに配置できます。セレクターを慎重に使用する場合は、コピー＆ペーストだけで最終結果を最後のグローバルcssファイルに移動できます。
every bitのcssをすぐにグローバルcssファイルに転送するのは少し難しいですが、ページ内の<style>要素を使用して、代替手段があります。
他の回答に加えて...国際化。
コンテンツの言語にもよりますが、多くの場合、要素のスタイルを調整する必要があります。
1つの明らかな例は、右から左に記述する言語です。
コードを使用したとしましょう：
<img src="myimage.gif" style="float:right" />
WebサイトでRTL言語をサポートしたい場合、次のようにする必要があります。
<img src="myimage.gif" style="float:left" />
そのため、両方の言語をサポートしたい場合、インラインスタイルを使用してfloatに値を割り当てる方法はありません。
CSSでは、これはlang属性で簡単に処理されます
したがって、次のようなことができます。
img {
float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
float:left;
}
デモ （
インラインCSSは常に、リンクされたスタイルシートCSSよりも常に優先されます。これにより、適切なカスケードスタイルシートを作成して作成したときに、プロパティが正しく適用されない場合に大きな頭痛の種になります。
また、アプリケーションのセマンティックも損なわれます。CSSはプレゼンテーションをマークアップから分離することです。この2つを絡めると、物事を理解し、維持するのがはるかに難しくなります。これは、サーバー側のコントローラーコードからデータベースコードを分離するのと同様の原則です。
最後に、これらのイメージタグが20個あるとします。それらを左にフロートする必要があると判断した場合はどうなりますか？
インラインCSSの使用は維持するのがはるかに困難です。
変更するすべてのプロパティについて、インラインCSSを使用するには、明確に定義され、うまくいけばうまく構造化されたCSSファイルの中だけを見るのではなく、対応するHTMLコードを探す必要があります。
CSSの重要なポイントは、コンテンツをプレゼンテーションから分離することです。したがって、あなたの例では、コンテンツとプレゼンテーションを混在させており、これは「有害と考えられる」可能性があります。
これは手書きコードにのみ適用されます。コードを生成する場合、特に要素とコントロールに特別な処理が必要な場合は、ここでインラインスタイルを使用してもかまいません。
DRYは手書きコードにとっては良い概念ですが、機械生成コードでは、「Demeterの法則」を選択します。「一緒に属するものは一緒にいなければなりません」。別の「リモート」CSSファイルでグローバルスタイルをもう一度編集するよりも、Styleタグを生成するコードを操作する方が簡単です。
あなたの質問への答え：それは依存します...
1つの要素に特定のスタイルを持たせたい場合でも、異なるページの同じ要素に同じスタイルを適用する可能性を考慮する必要があると思います。
ある日、誰かがすべてのページの同じ要素に文体的な変更を加えたり変更したりするように頼むかもしれません。外部CSSファイルでスタイルを定義している場合、そこに変更を加えるだけで、すべてのページの同じ要素に反映されるため、頭痛の種がなくなります。 :-)
好きなようにコーディングしますが、他の人にそれを渡す場合は、他の人がしていることを使うのが最善です。 CSSには理由があり、インラインには理由があります。両方を使用します。なぜなら、私にとっては簡単だからです。同じことを何度も繰り返す場合、CSSを使用するのは素晴らしいことです。ただし、プロパティが異なるさまざまな要素が多数ある場合は、問題になります。私にとっての1つの例は、ページ上の要素を配置するときです。異なる上部および左側のプロパティとしての各要素。すべてをCSSに入れてしまうと、htmlページとcssページの間を行き来するのが本当に面倒になります。したがって、CSSは、すべてに同じフォント、色、ホバー効果などを持たせたい場合に最適です。しかし、すべてが異なる位置にある場合、各要素にCSSインスタンスを追加するのは本当に面倒です。それは私の意見です。 CSSは、コードを掘り下げなければならないときに、大規模なアプリケーションに非常に重要です。 Mozilla Web開発者プラグインを使用すると、要素IDとクラスを見つけるのに役立ちます。
この例のように一度だけスタイルを使用しても、CONTENTとDESIGNが混在しています。 「懸念の分離」を検索します。
インラインスタイルを使用すると、同じソースファイルにマークアップとスタイルを効果的に混在させるため、懸念の分離の原則に違反します。また、ほとんどの場合、DRY（Do n't Repeat Yourself）原則に違反します。なぜなら、それらは単一の要素にのみ適用可能である一方、クラスはそれらのいくつかに適用できる（さらにはCSSルールの魔法！）。
さらに、サイトにスクリプトが含まれている場合は、クラスを慎重に使用すると便利です。たとえば、JQueryなどのいくつかの一般的なJavaScriptライブラリは、セレクターとしてクラスに大きく依存しています。
最後に、クラスを使用すると、DOMがさらに明確になります。これは、指定されたノードがどのような要素であるかを効果的に示す記述子があるためです。例えば：
<div class="header-row">It's a row!</div>
以下よりもはるかに表情豊かです：
<div style="height: 80px; width: 100%;">It's...something?</div>
Googleは、別のファイルから読み込まれたcssよりも優れたユーザーエクスペリエンスを提供していると評価しているため、現時点ではページはめ込みcssです。可能な解決策は、cssをテキストファイルに入れ、phpでその場でロードし、ドキュメントヘッドに出力することです。 <head>セクションにこれを含めます。
<head> ...
<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>
... </head>
必要なcssをstyles/style1.txtに入れると、ドキュメントの<head>セクションに吐き出されます。この方法では、すべてのページで共有できるスタイルテンプレートstyle1.txtを使用する利点があるページ内cssがあり、サイト全体のスタイルの変更をその1つのファイルのみで行うことができます。さらに、この方法では、すべてがPHPによって一度に配信されるため、ブラウザがサーバーから個別のcssファイルを要求する必要がありません（したがって、取得/レンダリング時間が最小限に抑えられます）。
これを実装すると、必要に応じて、個別の1回限りのスタイルを手動でコーディングできます。
インラインCSSは、マシンで生成されたコードに適しています。ほとんどの訪問者がサイトで1ページしか閲覧しない場合は問題ありませんが、メディアクエリを処理して、サイズの異なる画面の外観を変えることはできません。そのためには、外部スタイルシートまたは内部スタイルタグのいずれかにCSSを含める必要があります。
AMP HTML Specification によると、パフォーマンスを向上させるために、CSSをHTMLファイルに（外部スタイルシートに対して）配置する必要があります。これはインラインCSSを意味するのではなく、 外部スタイルシートを指定しない です。
そのようなサービングシステムが行う可能性のある最適化の不完全なリストは次のとおりです。
- 画像参照を、視聴者のビューポートに合わせたサイズの画像に置き換えます。
- スクロールせずに見える可視画像。
- インラインCSS変数。
- 拡張コンポーネントをプリロードします。
- HTMLとCSSを縮小します。
上記のすべての回答には完全に同意しますが、CSSを別のファイルに記述する方がコードの再利用性、保守性、懸念事項の分離から常に優れているということです。
外部CSSファイルにより、ブラウザーへのHTTP呼び出しが1つ余分に発生するため、待ち時間が長くなります。代わりに、CSSがインラインで挿入された場合、ブラウザはすぐに解析を開始できます。特にSSLを介したHTTP呼び出しはよりコストがかかり、ページの待ち時間が長くなります。外部CSSファイルをインラインコードとして挿入することで、静的なHTMLページ（またはページスニペット）を生成するのに役立つ多くのツールが利用できます。これらのツールは、プロダクションバイナリが生成されるビルドおよびリリースフェーズで使用されます。これにより、外部CSSのすべての利点が得られ、ページも高速になります。