私は、htmlでstyle属性を使用することは、悪い/ずさんな/悪い形式と見なされると言われています。さらに、レンダリング固有のすべてのビットは、必要に応じてcssおよびその他の部分に分割する必要があります。私はこれが正確になぜであるかを理解しようとしています。
HTMLをドキュメントの構造について説明する純粋なセマンティックDOMに保ちたい理由はわかりますが、実際のページでは、ページが正しく表示され、適切に機能することが重要です。
この分離には、もっと説得力のある理由がありますか?
関心の分離これにより、マークアップを変更せずにスタイルを簡単に置き換えることができます。その逆も可能です。さらに、1人の人がCSSで作業し、別の人がコンテンツで作業することができます
繰り返さないでください何度も繰り返さなくても、多くの要素にスタイルを適用できます。ページが小さいほど、より少ない帯域幅を使用してロード時間が短縮されます。さらに、多くのファイルの多くの場所ではなく、1つのファイルの1つの場所で変更できるため、後で変更する方が簡単です。
キャッシュ可能性サイトのすべてのページで同じスタイルシートが使用されている場合、ブラウザは、すべてのページのコンテンツを含むスタイルをダウンロードする代わりに、一度ダウンロードしてからキャッシュすることができます。また、それらのページのコンテンツが変更されるたびに、再ダウンロードする必要はありません。
複数のバージョンスタイルシートファイルを交換するだけですべてのページの外観を変更できるため、サイトの視覚的なレイアウトと外観の複数のバージョンを簡単に作成できます。たとえば、パートナーがブランドに合わせてスキンを変更できるWebアプリケーションのホワイトラベルバージョンを作成できます。このアプローチがいかに柔軟であるかについてのいくつかの素晴らしい例については、CSSZenGardenを参照してください。
このコードから始めます:
<ul>
<li style="color: blue;">One</li>
<li style="color: blue;">Two</li>
<li style="color: blue;">Three</li>
<li style="color: blue;">Four</li>
</ul>
今日、リンクの色を赤に変更するとします。これらのスタイルはインラインであるため、退屈に各要素をウォークスルーしてstyle
属性を変更する必要があります。これを10、おそらく20のHTMLページで実行すると、これが問題になる理由がわかります。
スタイルシートを使用すると、コンテンツが分離されます。
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
スタイルから:
ul li {
color: blue;
}
最初からスタイルシートを使用していた場合、色の変更はスタイルシートでの変更と同じくらい簡単blue
ですred
。
ドキュメントのスタイルを簡単にするだけでなく、セレクターの特異性もあります。前の開発者から最初のコードチャンクを継承し、色をもう一度変更したいが、(優れた開発者である)スタイルシートを好むと想像してください。
ul li {
color: red;
}
!important
セレクターはインラインスタイルをオーバーライドできないため、すぐにイライラし、を使用することになります。
複数のページに含まれる要素の1つのスタイルを変更する場合は、CSSから1つのスタイルを変更するだけで、変更がすべてのファイルに適用されるため、CSSはHTMLに含まれる別のファイルである必要があります。HTMLのスタイルを使用している場合は、ページを1つずつ移動して、スタイルを変更する必要があります。その優れたテンプレート作成方法。
マークアップとcssを分離する。cssを使用すると、マークアップに影響を与えることなく、すべての外観を変更できます。
利点は次のとおりです。同じhtmlに対して異なるデザインを作成します。チーム内で作業を分割します。1人のフロントエンド開発者は完全にCSSに集中できます。バックエンド開発者は、cssに煩わされる必要はありません。将来的に外観を変更するのが簡単になります。将来、htmlマークアップを新しいプラットフォームまたはコンテンツ管理システムに簡単に移行できます。