インラインCSSの何が悪いのですか？

Webサイトのスターターコードと例を見ると、CSSは常に「main.css」、「default.css」、または「Site.css」のような名前の別のファイルにあります。しかし、ページをコーディングしているとき、画像に "float：right"を設定するなどして、DOM要素を使用してインラインでCSSをスローしたくなることがよくあります。例ではめったに行われないので、これは「悪いコーディング」だと感じます。

スタイルが複数のオブジェクトに適用される場合、 "Do n't Repeat Yourself"（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ファイルを持つ利点は

1. HTMLページの管理が簡単
2. ルックアンドフィールへの変更は簡単で、ページ上の多くのテーマをサポートできます。
3. あなたのCSSファイルはブラウザ側でキャッシュされます。したがって、ページが更新されるたびに、またはユーザーがサイトに移動するたびに、数KBのデータを読み込まないことで、インターネットトラフィックに少し貢献します。

高速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ファイルに移動できます。

cssのすべてのビットをすぐにグローバルcssファイルに転送するのは少し難しいですが、ページはめ込み<style>要素があるため、代替手段があります。

他の回答に加えて... 国際化。

コンテンツの言語に応じて、要素のスタイルを調整する必要があることがよくあります。

明らかな例の1つは、右から左へ記述する言語です。

コードを使用したとしましょう：

<img src="myimage.gif" style="float:right" />

今あなたがあなたのウェブサイトがRTL言語をサポートすることを望んでいると言ってください-あなたは必要です

<img src="myimage.gif" style="float:left" />

したがって、両方の言語をサポートする場合、インラインスタイルを使用して浮動小数点に値を割り当てる方法はありません。

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を使用する場合は、明確に定義された、うまく構成されたCSSファイルを単に調べるのではなく、対応するHTMLコードを探す必要があります。

これは手書きのコードにのみ適用されます。コードを生成する場合、特に要素やコントロールに特別な処理が必要な場合は、インラインスタイルをここで使用しても問題ないと思います。

DRYは手書きコードに適したコンセプトですが、機械で生成されたコードでは、「法則の法則」を選択します。別の「リモート」CSSファイルでグローバルスタイルをもう一度編集するよりも、Styleタグを生成するコードを操作する方が簡単です。

あなたの質問への答え：それは異なります...

1つの要素に特定のスタイルを設定したい場合でも、異なるページの同じ要素に同じスタイルを適用する可能性を考慮する必要があると思います。

ある日、誰かがすべてのページの同じ要素を変更したり、スタイルの変更を追加したりするように依頼する場合があります。外部CSSファイルでスタイルを定義している場合は、そこに変更を加えるだけで、すべてのページの同じ要素に反映されるため、頭痛の種を省くことができます。:-)

どのようにコーディングするかをコーディングしますが、それを他の誰かに渡す場合は、他の誰もが行うことを使用するのが最善です。CSSには理由があり、インラインには理由があります。どちらも使いやすいので、両方を使用しています。同じ繰り返しがたくさんある場合は、CSSを使用すると便利です。ただし、さまざまなプロパティを持つさまざまな要素がたくさんある場合は、問題になります。私の1つの例は、ページ上に要素を配置するときです。上部と左側の異なるプロパティとしての各要素。それをすべてCSSに入れると、htmlページとcssページの間を行き来するのが本当に面倒になります。したがって、CSSは、すべてに同じフォント、色、ホバー効果などを持たせたい場合に最適です。ただし、すべての位置が異なる場合は、各要素にCSSインスタンスを追加するのは本当に面倒です。それは私の意見ですが。CSSは、コードを掘り下げる必要がある場合、大規模なアプリケーションとの関連性が非常に高いです。Mozilla Web開発者プラグインを使用すると、要素のIDとクラスを見つけるのに役立ちます。

この例のようにスタイルを1度だけ使用しても、CONTENTとDESIGNが混在しています。「懸念の分離」の検索。

インラインスタイルを使用すると、同じソースファイルでマークアップとスタイルを効果的に混在させるため、関心の分離の原則に違反します。また、クラスは単一の要素にのみ適用できるため、ほとんどの場合、DRY（Do n't Repeat Yourself）の原則に違反しています。 ）。

さらに、サイトにスクリプトが含まれている場合は、クラスを慎重に使用することが有益です。たとえば、JQueryなどのいくつかの一般的なJavaScriptライブラリは、セレクターとしてクラスに大きく依存しています。

最後に、クラスを使用すると、DOMがさらに明確になります。これは、指定されたノードがどのような要素であるかを示す記述子を効果的に提供するためです。例えば：

<div class="header-row">It's a row!</div>

よりもはるかに表現力があります：

<div style="height: 80px; width: 100%;">It's...something?</div>

ページはめ込みcssは、Googleが別のファイルから読み込まれたcssよりも優れたユーザーエクスペリエンスを提供すると評価しているため、現時点ではインページです。可能な解決策は、CSSをテキストファイルに入れ、PHPを使用してオンザフライでロードし、ドキュメントヘッドに出力することです。で<head>セクションこれを次のとおりです。

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

必要なcssをstyles / style1.txtに入れてください。 <head>、ドキュメントのセクションに表示されます。このようにして、ページ内CSSを作成し、すべてのページで共有できるスタイルテンプレートstyle1.txtを使用して、その1つのファイルだけでサイト全体のスタイルを変更できるようにします。さらに、この方法ではすべてがphpによって一度に配信されるため、ブラウザーがサーバーから個別のcssファイルを要求する必要がないため（検索/レンダリング時間を最小限に抑えることができます）。

これを実装すると、個別の1回限りのスタイルを必要に応じて手動でコーディングできます。

インラインCSSは、機械で生成されたコードに適しています。ほとんどの訪問者がサイトの1ページしか閲覧しない場合は問題ありませんが、メディアクエリを処理して、さまざまなサイズの画面のさまざまな外観を許可することはできません。そのためには、CSSを外部スタイルシートまたは内部スタイルタグに含める必要があります。

上記のすべての回答に完全に同意しますが、CSSを別のファイルに書き込むことは、コードの再利用性、保守性、懸念の分離から常に優れていると言えます。

外部CSSファイルにより、ブラウザーへのHTTP呼び出しが1つ増えるため、レイテンシが長くなります。代わりに、CSSがインラインで挿入されている場合、ブラウザはすぐにCSSの解析を開始できます。特にSSL経由のHTTP呼び出しはよりコストがかかり、ページのレイテンシが増加します。インラインコードとして外部CSSファイルを挿入することにより、静的なHTMLページ（またはページスニペット）を生成するのに役立つ多くのツールが利用可能です。これらのツールは、プロダクションバイナリが生成されるビルドおよびリリースフェーズで使用されます。これにより、外部CSSのすべての利点が得られ、ページが高速になります。

AMP HTML仕様によれば、パフォーマンス向上のために、CSSをHTMLファイル（外部スタイルシートではない）に配置する必要があります。これはインラインCSSを意味しませんが、外部スタイルシートを指定しません。

このようなサービングシステムが行う可能性のある最適化の不完全なリストは次のとおりです。

• 画像参照を、ビューアのビューポートに合わせたサイズの画像に置き換えます。
• スクロールせずに見える範囲にあるインライン画像。
• インラインCSS変数。
• 拡張コンポーネントをプリロードします。
• HTMLとCSSを縮小します。

他の回答に加えて、インラインCSSの疑似クラスまたは疑似要素をターゲットにすることはできません