HTML 模板 | CSS-Tricks

Manuel Matuzović 逐行解析一个模板 HTML 文档。我喜欢它。这是一个很好的参考，包含了许多我倾向于放在主 HTML 模板中的相同类型的内容。它让我思考这种东西是多么的 *主观*。几乎每一行！不是 `DOCTYPE`，也不是 `<title>`，但几乎所有其他东西都是。

HTML 部分

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <title>Unique page title - My Site</title>

  <script type="module">
    document.documentElement.classList.remove('no-js');
    document.documentElement.classList.add('js');
  </script>

  <link rel="stylesheet" href="/assets/css/styles.css">
  <link rel="stylesheet" href="/assets/css/print.css" media="print">

  <meta name="description" content="Page description">
  <meta property="og:title" content="Unique page title - My Site">
  <meta property="og:description" content="Page description">
  <meta property="og:image" content="https://www.mywebsite.com/image.jpg">
  <meta property="og:image:alt" content="Image description">
  <meta property="og:locale" content="en_GB">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="https://www.mywebsite.com/page">
  <link rel="canonical" href="https://www.mywebsite.com/page">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/my.webmanifest">
  <meta name="theme-color" content="#FF00FF">
</head>

<body>
  <!-- Content -->
  <script src="/assets/js/xy-polyfill.js" nomodule></script>
  <script src="/assets/js/script.js" type="module"></script>
</body>
</html>

也许我的网站没有使用任何 JavaScript 或者没有无 JavaScript 回退，所以我不需要任何类名跳舞。也许我的网站不需要打印样式，但我确实需要链接预取。也许我不关心社交图像，但我确实想要头部中的关键 CSS。它是一个模板，而不是处方 — 它意味着要被修改。

曾经有一段时间，HTML5 Boilerplate 是这个领域中的一个大型项目。它有一个完整的 GitHub 组织！该模板拥有 50,000 个星标！就我个人而言，我觉得该项目在开始拥有 `src` 和 `dist` 文件夹以及 200 行的 Gulp 构建流程时迷失了方向，你知道吗？它最适合作为对任何给定 Web 项目可能需要哪些东西的参考，但现在我觉得它有一种不必要的吓人之处。模板索引文件也非常主观。它假定使用 Normalize 和 Modernizr，这些当然不是过时的项目，但也不是我经常看到开发人员使用的项目。它甚至假定使用 Google Analytics！

我没有任何问题，人们可以拥有和分享模板文档，但考虑到它们是多么地不可避免地具有主观性，我同样也喜欢参考指南方法。只需向我展示所有可能放在 `<head>` 中的内容（这些模板的大部分价值），我就会选择我需要的（或可能忘记的）内容。为此，Josh Buchea 的 HEAD 项目非常酷。

评论

发表回复 取消回复

发表回复取消回复