HTML·3.4.5 关注点分离_咱们团队的多语言编程规范小册子

将表现和行为分开。严格保持结构（标记），表现（样式），和行为（脚本）分离, 并尽量让这三者之间的交互保持最低限度。确保文档和模板只包含HTML结构，把所有表现都放到样式表里，把所有行为都放到脚本里。关注点分离好的例子

<!DOCTYPE html>
<html lang='zh-cn'>

<head>
  <link rel="stylesheet" href="default.css">
</head>

<body>
  <script src="main.js"></script>
</body>

不好的例子

<!DOCTYPE html>
<html lang='zh-cn'>

<head>
  <style>
    body {
      background-color: red;
    }
  </style>
</head>

<body>
  <script>
    console.log('bad example')
  </script>
</body>

分离后的静态资源文件尽量合并，可以减少不必要的外链以节约网络资源。此外，尽量使脚本和样式表在文档与模板中有最小接触面积，即减少外链。将表现和行为分开维护是很重要滴，因为更改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!</p>