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>
|