39

私の頭の中では、どのプロジェクトでもインライン スタイルよりもクラスを使用することを常に知っていました。しかし、両者の間に効果的な違いはありますか?

4

10 に答える 10

35

初めに：

  • HTML が全体的なサイト デザイン (共有テンプレート コードなど) とは無関係に構築または生成される場合は、適切な名前のクラスと ID を追加し、外部スタイルシートにのみリンクします。任意の CSS 操作を可能にするために、十分な要素を使用してください。たとえば、CSS Zen Gardenを参照してください。これは、すべての CMS、プログラム、スクリプト、およびその他の動的に生成されるサイト コンテンツに適用されます。HTML 出力には、いかなる種類のスタイルやレイアウトもまったく含めてはなりません。例外なく。

静的コンテンツを扱っていると仮定すると、次のようになります。

  • スタイルを再利用できる方法がある場合は、クラスにしてスタイルシートにリンクします。

  • スタイルを再利用する方法がない場合 (これは 1 回限りのものであり、他の場所では意味がありません) <style>、要素の #id を参照するブロックを使用します。

  • CSS 属性が周囲の HTML のコンテキストでのみ意味をなす場合 (例: のいくつかの使用法clear:)、スタイルを要素にインライン化します。

多くの人がこれを異端と呼んでいます。ちょうど多くの人gotoが現代のプログラミング言語での の使用を非難するのと同じです。

ただし、文体のドグマに同意するのではなく、状況に応じて、全体的な作業負荷を最も軽減する方法を選択する必要があるというのが私の見解です。スタイルシートは、サイト レベルの変更を容易にし、一貫性の構築に役立つ間接的なレベルを追加します。しかし、1 つの場所でしか使用されないクラスが各ページに数十個ある場合、実際にはワークロードが減少するのではなく増加します。

言い換えれば、人々があなたにそれをするのが正しい方法だと言ったという理由だけで、愚かで混乱を招くようなことをしないでください.

于 2010-06-30T01:10:48.293 に答える
29

簡単な理由があります。CSS のポイントは、コンテンツ (HTML) をプレゼンテーション (CSS) から分離することです。アクセシビリティとコードの再利用がすべてです。

于 2010-06-29T16:34:56.057 に答える
8

選択肢があった場合、私の最初の好みはクラス/その他のセレクターになります。ただし、インライン スタイルが唯一の方法である場合もあります。別の状況では、CSS クラスだけでも多くの作業が必要であり、別のタイプの CSS セレクターが適している場合があります。

特定のリストまたはテーブルをゼブラ ストライプする必要があるとします。特定のクラスを各代替要素または行に適用する代わりに、単純にセレクターを使用してジョブを実行できます。これによりコードはシンプルになりますが、CSS クラスは使用されません。3 つの方法を説明するには:

クラスのみを使用

.alternate {
    background-color: #CCC;
}

<ul>
    <li>first</li>
    <li class="alternate">second</li>
    <li>third</li>
    <li class="alternate">fourth</li>
</ul>

クラス + 構造セレクターの使用

.striped :nth-child(2n) {
    background-color: #CCC;
}

<ul class="striped">
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ul>

インライン スタイルの使用

<ul>
    <li>first</li>
    <li style="background-color: #CCC">second</li>
    <li>third</li>
    <li style="background-color: #CCC">fourth</li>
</ul>

2 番目の方法は、最もポータブルでカプセル化されているように見えます。特定のコンテナ要素からストライプを追加または削除するには、stripedクラスを追加または削除するだけです。

ただし、インライン スタイルが意味があるだけでなく、唯一の方法である場合もあります。可能な値のセットが膨大な場合、可能な状態ごとに事前にクラスを作成しようとするのはばかげています。たとえば、ユーザーが特定のアイテムをドラッグして画面上の任意の場所に動的に配置できるようにする UI。アイテムは、次のような実際の座標で絶対的または相対的に配置する必要があります。

<div style="position: absolute; top: 20px; left: 49px;">..</div>

確かに、div が取ることができるそれぞれの可能な位置に対してクラスを使用できますが、それはお勧めできません。その理由は簡単にわかります。

.pos_20_49 {
    top: 20px;
    left: 49px;
}
.pos_20_50 {
    top: 20px;
    left: 50px;
}
// keep going for a million such classes if the container size is 1000x1000 px

<div class="pos_20_49">..</div>
于 2010-06-30T02:30:28.573 に答える
5

常識を働かせてください。

理想的な世界では、プレゼンテーションとコンテンツを分離する必要があることは誰もが知っています。多くの場合、これがうまく機能しないことも誰もが知っています。レイアウトにはテーブルではなく div を使用する必要があることは誰もが知っていますが、コンテンツを完全に制御できない状況では、適切に機能しないこともわかっています。

考えられるすべてのスタイルを取得してスタイル シートに貼り付けたために 1 つの要素をスタイルするために 500k スタイル シートをダウンロードすると、ページが強制終了されます。ページをスタイルするために 500 個の小さなスタイル シートをダウンロードすると、それらすべてが必要になるため、ページが強制終了されます。

再利用は概念としては優れていますが、実際には特定のコンテキストでしか役に立ちません。これは、概念が存在するほぼすべての場所に等しく当てはまります。あなたのプロジェクトがあなたのやりたいことを実行し、すべての合理的なブラウザーで実行し、効率的な方法で実行し、確実に実行する場合は、CSS をリファクタリングすることはコードよりも劇的に難しくありません。

于 2010-06-30T01:25:16.363 に答える
3

インラインスタイルの長所は思いつきません。

CSS はプログレッシブ エンハンスメントに関するものであり、自分自身 (DRY) の繰り返しではありません。

スタイルシートを使用すると、HTML コードの 1 行を変更するのと同じくらい簡単に外観を変更できます。間違いを犯したり、クライアントが変更を気に入らなかったりしますか? 古いスタイルシートに戻します。

その他の利点:

  1. あなたのサイトは、印刷物やハンドヘルド デバイスなど、さまざまなメディアに自動的に適応できます。

  2. 条件付きで含まれる CSS の修正は、その gawd-awful browser-that-shall-not-be-namedに対して簡単になります。

  3. ユーザーは、Stylish などのプラグインを使用してサイトを簡単にカスタマイズできます。

  4. サイト間でコードをより簡単に再利用または共有できます。

于 2010-06-29T18:32:33.303 に答える
2

インラインスタイルが適切および/または合理的である2つの状況のみを考えることができます。

  1. インラインスタイルがプログラムで適用される場合。たとえば、JavaScriptを使用して要素を表示および非表示にしたり、ページをレンダリングするときにコンテンツ固有のスタイルを適用したりします（＃2を参照）。

  2. インラインスタイルが、IDが適切でも合理的でもない場合に、単一の要素のクラス定義を完了する場合。たとえばbackground-image、ギャラリー内の単一の画像の要素の設定は次のとおりです。

HTML

<div id="gallery">
    <div class="image" style="background-image:url(...)">...</div>
    <div class="image" style="background-image:url(...)">...</div>
    <div class="image" style="background-image:url(...)">...</div>
</div>

CSS

#gallery .image {
    background: none center center;
}
于 2010-06-30T03:34:31.617 に答える
1

外部スタイルシートを使用していると仮定すると、前述のスタイルシートに加えて、キャッシュが追加の利点になります。ブラウザはスタイルシートを一度ダウンロードしてキャッシュし、それが参照されるたびにローカルコピーを使用します。これにより、マークアップをよりコンパクトにすることができます。転送と解析のマークアップが少ないということは、ユーザーの応答性とエクスペリエンスが向上することを意味します。

于 2010-06-30T00:44:23.823 に答える
1

インライン スタイルは間違いなく最適な方法です。http://www.csszengarden.com/を見てください -クラスと外部スタイルシートでは決して不可能だったでしょう...

または待って...

于 2010-06-30T01:29:41.793 に答える