web-dev-qa-db-ja.com

インラインスタイルとクラス

私の頭の中では、どのプロジェクトでもインラインスタイルよりもクラスを使用することを常に知っています。しかし、それぞれの長所/短所を定義する記事/投稿/ブログはありますか？私はこれについて議論していますが、これについてずっと前に読んだブログ記事を見つけることができないようです。

csscss3inline-styles
33
Corey Hart

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

24
gblazex

まず第一に：

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

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

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

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

  • CSS属性が周囲のHTMLのコンテキストでのみ意味がある場合（例：clear:の使用）、スタイルを要素にインライン化します。

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

ただし、スタイル論の定説を購読するのではなく、全体的な作業負荷を最も減らす方法を、状況に基づいて選択する必要があります。スタイルシートは、サイトレベルの変更を容易にし、一貫性を構築するのに役立つ間接レベルを追加します。ただし、各ページに1か所でのみ使用される数十のクラスがある場合、実際にはワークロードを減らすのではなく、ワークロードを増やすことになります。

言い換えれば、人々があなたにそれが正しい方法であると言っているからといって、愚かで混乱したことをしないでください。

31
tylerl

選択肢があった場合、私の最初の好みはクラス/他のセレクターになります。ただし、インラインスタイルが唯一の方法である場合があります。他の状況では、CSSクラス自体が非常に多くの作業を必要とし、他のタイプのCSSセレクターがより理にかなっています。

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

クラスのみを使用する

.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>
7
Anurag

常識を使用します。

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

500kスタイルシートをダウンロードして1つの要素をスタイル設定すると、可能なすべてのスタイルを取り込んでスタイルシートに貼り付けられるため、ページが強制終了されます。

再利用は概念的には優れていますが、現実には特定の状況でのみ有用です。これは、コンセプトが存在するほとんどどこでも同様に適用されます。あなたのプロジェクトがあなたがやりたいことをやり、合理的なすべてのブラウザでそうし、効率的な方法でやり、そして確実にそうするなら、あなたは行ってもいいです、cssをコードよりもリファクタリングするのは劇的に難しくありません。

5
Chris

インラインスタイルの長所は考えられません。

CSSは、 プログレッシブエンハンスメント 、および 自分自身を繰り返さない（DRY） がすべてです。

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

その他の利点：

  1. サイトは、印刷用やハンドヘルドデバイス用など、さまざまなメディアに自動的に調整できます。

  2. Gawd-awfulbrowser-that-shall-not-be-namedの条件付きで含まれるCSSの修正は、スナップになります。

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

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

3
Brock Adams

インラインスタイルが適切または合理的である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;
}
2
Justin Johnson

このスレッドを完了するには、HTML + CSSメールを作成するときに インラインスタイルがGMailで唯一の方法です に言及する価値があります。

詳細については、以下を参照してください。 http://www.email-standards.org/clients/gmail/

2
jakub.g

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

1
Jesse Squire

インラインスタイルは間違いなく行くべき方法です。 http://www.csszengarden.com/ をご覧ください-classesおよびexternalでは不可能だったでしょうスタイルシート...

または待つ...

1
Xeoncross

クラスは、HTML要素に追加できる再利用可能なスタイルです。例えば-

<style> 
   .blue-text{color:Blue;}
</style>

このブルーテキストクラスを任意のHTML要素で使用および再利用できます。CSSスタイル要素では、クラスはピリオドで始まる必要があることに注意してください。 HTML要素のクラス宣言では、クラスはピリオドで始まってはいけません。一方、インラインスタイルは、たとえば

<p style="color:Blue;">---</p>

したがって、両方の違いは、クラスを再利用できるのに対して、インラインスタイルを再利用できないことです。

0
lastnamearya

CSSにカスタムプロパティを追加すると、別の使用例があります。インラインスタイルを使用してカスタムプロパティを設定できます。

たとえば以下では、CSSグリッドを使用してHTMLリストとDivブロックを揃えていますが、このHTMLはアプリケーションによって動的に生成されるため、HTMLに柔軟性を持たせたい（BootStrapまたは他のフレームワークが提供する方法） 。

CSS：

:root{
--grid-col : 12;
--grid-col-gap:1em; 
--grid-row-gap:1em;
--grid-col-span:1;
--grid-row-span:1;
--grid-cell-bg:lightgray;
}

.grid{
    display: grid;
    grid-template-columns: repeat(var(--grid-col), 1fr);
    column-gap: var(--grid-col-gap);
    row-gap: var(--grid-row-gap);
}

.grid-item{
    grid-column-end: span var(--grid-col-span);
    grid-row-end: span var(--grid-row-span);
    background: var(--grid-cell-bg);
}

HTML：

    <ul class="grid" style="--grid-col:4">
        <li class="grid-item">Item 1</li>
        <li class="grid-item">Item 2</li>
        <li class="grid-item">Item 3</li>
        <li class="grid-item">Item 4</li>
        <li class="grid-item">Item 5</li>
        <li class="grid-item">Item 6</li>
        <li class="grid-item">Item 7</li>
        <li class="grid-item">Item 8</li>
    </ul>

上記のHTMLで4つの列を3に変更するには、style属性を使用してカスタムプロパティを変更します。

    <ul class="grid" style="--grid-col:3">
        <li class="grid-item">Item 1</li>
        <li class="grid-item">Item 2</li>
        <li class="grid-item">Item 3</li>
        <li class="grid-item">Item 4</li>
        <li class="grid-item">Item 5</li>
        <li class="grid-item">Item 6</li>
        <li class="grid-item">Item 7</li>
        <li class="grid-item">Item 8</li>
    </ul>

https://codepen.io/anon/pen/KJWoqw で拡張ライブの例を確認できます

0
Praveen Rai