CSS直書きのメリット・デメリット

Question

HTMLでは意味論に相当する部分だけを書いて、あとはCSSでデザインを付ける、というのがあるべき姿だというのは重々承知で、そして基本としてはそう行っています。

ただ、たまにデザイン重視で、他では絶対使わないような特設ページを組む場面がありまして、そのような状況では、タグそのものにstyle属性でCSSを振ることもあります。

このようにタグへCSSを直書きすることは、「再利用性に劣る」「内容とデザインの未分離」以上に何かしらの問題を生むことはあるのでしょうか。

また、逆に「こういうところでは直書きにしている」というようなものがありましたら、具体例を挙げていただけましたら幸いです。

Answer 1

メリット

• ブラウザのレンダリングパフォーマンスがよい
• 1つのリクエストでhtmlとスタイルをまとめて送る事ができるので、通信コストがへる
• 外部ファイル化されていないのでキャッシュによる表示の崩れが起こらない

デメリット

• 外部ファイル化されていないのでキャッシュさせることができない
• 再利用、メンテナンスが困難
• ソースがごちゃごちゃする

直書きする場面

読み込み時に非表示にしておきたい場合はstyle="display:none"という用に要素に直書きすることはよくあります。
例えばJavaScriptを使用してフワーッと表示させたいときに有効です。
もしこれをしなければjsやcssを読み込み終わる前に要素が表示されてしまい、挙動がかっこ悪くなってしまいます。

htmlに直書きする別の方法について

また、少し話は変わりますが、非常に少ないcssで済む場合は外部ファイル化せずに、htmlのheadタグの中にstyleタグを書くということはよくあるかと思います。
上記のメリットが恩恵として受けられますし、デメリットも直書きするよりは減ります。
jsをscriptタグを用いて書く場合も同様の理由が多いと思います。(アナリティクス用の計測タグなど)

これくらいでしょうか。
「再利用性に劣る」「内容とデザインの未分離」という点を理解されているので、予期せぬ大きな問題が起こることはないか、簡単に回避できるものだと思います。