2.1 HTMLスタイルルール
2.1.5 構造の分離
ストラクチャ（マークアップ）からスタイルとスクリプトを分割する。
プレゼンテーション（スタイル）とスクリプトは、ストラクチャ（マークアップ）から分割します。HTMLドキュメントやテンプレートでは、リンクによるスタイルシートやスクリプトとの関連は極力少なくします。構造の分離は、メンテナンス性において非常に重要です。HTMLドキュメントやテンプレートの更新は、スタイルシートやスクリプトを更新するより多くの労力を必要とします。
| ▽推奨サンプル |
<!-- OK -->
<!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>My first CSS-only redesign</h1>
<p>I’ve read about this on a few sites but today I’m actually
doing it: separating concerns and avoiding anything in the HTML of
my website that is presentational.
<p>It’s awesome!
|
| ▽非推奨サンプル |
<!-- NG -->
<!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:
<u>HTML is stupid!!1</u>
<center>I can’t believe there’s no way to control the styling of
my website without doing everything all over again!</center>
|