css - スタイル属性 vs 設定 ID と外部 Css

Question

すべてのプレゼンテーション要素をマークアップの外に置き、それらを外部の .css ファイルに入れるという概念を理解しています。

ID や外部 Css の設定に対して style 属性の使用を正当化するのはどのような状況なのか、感触をつかみたいと思います。

ここまで、私は style 属性を多く使用してきました。通常は、その要素に固有のプレゼンテーション項目や、外部の css ファイルに取り込むすべての要素に関係するものを指定するために使用しますが、自分の位置を再評価したいと思います。今後も最善の選択を。

score 2 · Accepted Answer

静的定義には外部CSSを使用します。実行時に変更されるものや、CSSが必要な機能を備えていないために設定するために、Javascriptが必要な場合は、要素IDルックアップとスタイル属性を使用します。

後者の良い例は、 CSS 3セレクターが広くサポートされる前のjQueryでのゼブラストライピングでした：

$(document).ready = function() {
    $("table tr:nth-child(even)").addClass("striped");
});

今日では、静的CSSでそれを行うことができますが、昔々、Javascriptで行うことが最良のオプションでした。

score 2 · Accepted Answer

外部スタイルシートを使用していますが、その理由は次のとおりです。

保守性 - すべてのプレゼンテーション資料が 1 つのファイルにあると、はるかに簡単になります。
コードを DRY に保つ - うん、これもまた。以前は、スタイル属性を使用して、ディスプレイを「ブロック」または「なし」に交互に設定していました。ここで、「hide」というクラスを使用し、何かを非表示にする必要がある場合はそのクラスを使用し、何かを表示する必要がある場合は削除します。本格的な Ajax アプリケーションの最近では、私は自分のコードでそのようなことを繰り返さないようにしており、コードはよりクリーンになっています。
大規模なプロジェクト設定で作業する場合に役立ちます - 私の前の職場では、同じルックアンドフィールを共有する一連のアプリケーションがありました。特定のイベントが発生した後に呼び出されるスタイルを含め、すべてを外部スタイルシートに入れることで、チームは一貫した UI デザインをアプリに適用することができました。

スタイル属性を使用する理由を考えてみましたが、正直なところ、何かをすばやく変更するためにスタイルシートを開くのが面倒な場合にのみ使用していると言えます (この部分はあまり得意ではないので、最小限に抑えようとしています)。

score 0 · Accepted Answer

すべてのスタイルをスタイルシートに移動することの大きな利点の1つは、保守性です。インラインスタイルを見つけることは、コードを維持しようとしている他の人々にとって大きな苦痛になる可能性があります。

その理由だけで、特定の要素にIDを割り当て、スタイルシートでそのスタイルを定義することは価値があります。

次に、多くのインラインスタイルを記述している場合は、IDに加えて、CSSの継承プロパティまたはいくつかの適切に因数分解されたクラスを使用して、それらのスタイルをさらに因数分解している可能性があります。

パフォーマンス面では、IDの選択はCSSと同じくらい高速であるため、マイクロ秒単位であっても、多くのクラスを使用すると、IDをドリルダウンするよりも実際には遅くなります。

インラインスタイルを使用するのが適切だと思う唯一のリアルタイムは、JavaScriptを使用したアニメーションや、要素の非表示と表示などの非常に一時的なプロパティです（ただし、クラスでも実行できます）。

3 に答える 3