严格保持结构 (标记),表现 (样式),和行为 (脚本)分离, 并尽量让这三者之间的交互保持最低限度。
确保文档和模板只包含HTML结构, 把所有表现都放到样式表里,把所有行为都放到脚本里。
此外,尽量使脚本和样式表在文档与模板中有最小接触面积,即减少外链。
将表现和行为分开维护是很重要滴,因为更改HTML文档结构和模板会比更新样式表和脚本更花费成本。
<!-- 不推荐 -->
<!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>
<!-- 推荐 -->
<!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!