197

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

スタイルが複数のオブジェクトに適用される場合は、"Don't Repeat Yourself" (DRY) に従い、それを CSS クラスに割り当てて各要素から参照するのが賢明であることを理解しています。ただし、別の要素で CSS を繰り返さないのであれば、HTML を記述するときに CSS をインライン化しないのはなぜでしょうか?

質問: インライン CSS の使用は、その要素でのみ使用されるとしても、悪いと見なされますか? もしそうなら、なぜですか?

例 (これは悪いことですか?):

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

19 に答える 19

224

サイトの外観を変えたい場合、100 行のコードを変更する必要があります。それはあなたの例には当てはまらないかもしれませんが、インラインCSSを次のようなものに使用している場合

<div style ="font-size:larger; text-align:center; font-weight:bold">

各ページでページ ヘッダーを示すために、次のように維持するのがずっと簡単になります。

<div class="pageheader">  

ページヘッダーが単一のスタイルシートで定義されている場合、サイト全体でページヘッダーの外観を変更したい場合は、css を 1 か所で変更します。

ただし、私は異端者であり、あなたの例では問題はないと言います。おそらく単一のページで正しく見える必要がある単一の画像の動作をターゲットにしているため、実際のcssをスタイルシートに入れるのはおそらくやり過ぎです。

于 2010-04-10T06:26:30.890 に答える
72

別の css ファイルを持つことの利点は次のとおりです。

  1. HTMLページのメンテナンスが簡単
  2. ルック アンド フィールの変更は簡単で、ページで多くのテーマをサポートできます。
  3. css ファイルはブラウザ側にキャッシュされます。そのため、ページが更新されるたびに、またはユーザーがサイトをナビゲートするたびに数キロバイトのデータを読み込まないようにすることで、インターネット トラフィックに少し貢献できます。
于 2010-04-10T06:30:04.850 に答える
31

CSS プロトタイピングを高速化するための html5 アプローチ

または:<style>タグはもはや頭だけのものではありません!

CSSのハッキング

デバッグ中で、page-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>要素を使用すると、代替手段が得られます。

于 2013-11-22T19:13:57.983 に答える
17

インライン CSS は常に、リンクされたスタイルシート CSS よりも優先されます。これは、適切なカスケード スタイルシートを作成してプロパティが正しく適用されない場合に、大きな頭痛の種になる可能性があります。

また、意味的にもアプリケーションに悪影響を及ぼします。CSS は、プレゼンテーションをマークアップから分離するためのものです。この 2 つが絡み合うと、物事を理解して維持することがはるかに難しくなります。これは、サーバー側でデータベース コードをコントローラー コードから分離するのと同様の原則です。

最後に、これらのイメージ タグが 20 個あるとします。それらを左にフロートする必要があると判断した場合はどうなりますか?

于 2010-04-10T06:28:07.907 に答える
13

インライン CSS を使用すると、保守がはるかに困難になります。

変更したいすべてのプロパティに対して、インライン CSS を使用すると、明確に定義され、適切に構造化された CSS ファイル内を調べるだけでなく、対応する HTML コードを探す必要があります。

于 2010-04-10T06:25:38.833 に答える
12

CSS の要点は、コンテンツをそのプレゼンテーションから分離することです。したがって、あなたの例では、コンテンツとプレゼンテーションを混在させていますが、これは「有害と見なされる」可能性があります。

于 2010-04-10T06:28:38.467 に答える
5

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

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

于 2010-04-10T06:27:34.750 に答える
4

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

于 2011-11-11T17:35:54.883 に答える
3

この例のようにスタイルを 1 回しか使用しない場合でも、CONTENT と DESIGN が混在しています。「関心の分離」を参照してください。

于 2010-04-10T06:28:19.343 に答える
2

インライン スタイルを使用すると、同じソース ファイル内でマークアップとスタイルを効果的に混在させることになるため、関心の分離の原則に違反します。また、ほとんどの場合、DRY (Don'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>
于 2016-05-12T15:01:49.690 に答える
2

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

于 2016-12-18T01:28:04.970 に答える
1

ページ内 css は、別のファイルから読み込まれた 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>、ドキュメントのセクションに吐き出されます。このようにして、スタイル テンプレート style1.txt を使用する利点を備えたページ内 css が作成されます。これは、すべてのページで共有できるため、その 1 つのファイルのみを介してサイト全体のスタイル変更を行うことができます。さらに、この方法では、すべてが php によって一度に配信されるため、ブラウザーがサーバーから個別の css ファイルを要求する必要がありません (したがって、取得/レンダリング時間が最小限に抑えられます)。

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

于 2016-12-04T13:26:11.320 に答える
0

別のファイルに CSS を記述することは、コードの再利用性、保守性、関心の分離の点で常に優れているという上記のすべての回答に完全に同意しますが、本番コードでインライン CSS を好む多くのシナリオがあります -

外部 CSS ファイルにより、ブラウザーへの余分な HTTP 呼び出しが 1 回発生するため、待ち時間が長くなります。代わりに、CSS がインラインで挿入されている場合、ブラウザはすぐに解析を開始できます。特に SSL を介した HTTP 呼び出しはよりコストがかかり、ページに追加の待ち時間が追加されます。外部 CSS ファイルをインライン コードとして挿入することにより、静的な HTML ページ (またはページ スニペット) を生成するのに役立つツールが多数あります。これらのツールは、製品バイナリが生成されるビルドおよびリリース フェーズで使用されます。このようにして、外部 CSS のすべての利点が得られ、ページも高速になります。

于 2014-11-26T18:38:10.223 に答える
0

HTML、XML、コンピューター言語、非構造化テキスト、DSV など、あらゆる種類のテキスト アーティファクトにインクルード ファイル機能を提供するテンプレート駆動のアーティファクト ジェネレーターを作成しました (たとえば、一般的な Web またはマニュアル ページのヘッダーを処理するのに最適です)。スクリプティングなしのフッター)。

それを取得し、それを使用して「head」タグ内に「style」タグを提供すると、「関心の分離」引数がなくなり、「テンプレートを変更するたびに再生成する必要がある」および「生成されたものからテンプレートをデバッグする」. これらの不満は、最初のコンピューター言語がプリプロセッサを取得したとき (または誰かが M4 を使い始めたとき) から存在しています。

全体として、CSS ファイルまたは「スタイル」タグのいずれかのメタ化機能は、要素レベルのスタイリングよりもクリーンでエラーが発生しにくいと考えています。ただし、専門的な判断が必要なため、初心者や散漫な人は気にしません。

于 2020-07-22T01:39:41.853 に答える