1. ホーム
  2. css

[解決済み】インラインCSSの何がそんなに悪いのか?

2022-04-13 06:49:40

質問

ウェブサイトのスターターコードやサンプルを見ると、CSSはいつも別のファイルに入っていて、"main.css", "default.css", "Site.css" などの名前がつけられています。しかし、ページをコーディングしていると、画像に "float: right" を設定するなど、DOM要素にインラインでCSSを投げ込みたくなることがよくあるのです。これは、例ではほとんど行われていないので、悪いコーディングだと感じています。

複数のオブジェクトに適用されるスタイルであれば、"Don't Repeat Yourself" (DRY) に従って、各要素から参照されるCSSクラスに割り当てるのが賢明だということは理解しています。しかし、別の要素でCSSを繰り返すことがないのであれば、HTMLを書くときにCSSをインライン化するのはどうでしょうか。

という疑問があります。インラインCSSを使用することは、たとえその要素にしか使用されないとしても、悪いこととみなされるのでしょうか?もしそうなら、なぜですか?

例(これって悪いこと?)

<img src="myimage.gif" style="float:right" />

解決方法は?

サイトの見た目を変えたいとき、100行のコードを変更しなければならないこと。 あなたの例には当てはまらないかもしれませんが、もしインラインCSSを以下のようなことに使っているのであれば、そのようなことはありません。

<div style ="font-size:larger; text-align:center; font-weight:bold">

を各ページのヘッダを示すために使用すると、メンテナンスが非常に簡単になります。

<div class="pageheader">  

ページヘッダーが単一のスタイルシートで定義されている場合、サイト全体でページヘッダーの見え方を変更したい場合、一箇所でCSSを変更することになります。

しかし、異端児の私が言うのもなんですが、あなたの例では何の問題もないと思います。1枚の画像の動作をターゲットにしており、おそらく1つのページで正しく見える必要があるため、実際のCSSをスタイルシートに置くことはおそらく過剰なことでしょう。