HTML Boilerplates | CSS-Tricks

Manuel Matuzović geht eine Boilerplate-HTML-Datei Zeile für Zeile durch. Ich mag das. Es ist eine gute Referenz und enthält viele der Dinge, die ich normalerweise in eine HTML-Vorlage packe. Es bringt mich zum Nachdenken darüber, wie *meinungsbildend* so etwas sein kann. Nahezu jede Zeile! Nicht die DOCTYPE, nicht der <title>, aber fast alles andere.

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

Vielleicht verwendet meine Website kein JavaScript oder hat keine Fallback-Lösungen für JavaScript, sodass ich keinen dieser klassenamenbezogenen Tanzschritte benötige. Vielleicht benötigt meine Website keine Druckstile, aber ich brauche Link Prefetching. Vielleicht interessieren mich Social-Media-Bilder nicht, aber ich möchte kritische CSS-Styles im Head-Bereich haben. Es ist eine Boilerplate, keine Vorschrift – sie ist dazu gedacht, geändert zu werden.

Es gab eine Zeit, da war HTML5 Boilerplate ein riesiges Projekt in diesem Bereich. Es hat eine ganze GitHub-Organisation! Die Boilerplate hat 50.000 Sterne! Persönlich finde ich, dass das Projekt seinen Weg verloren hat, als es begann, einen src- und dist-Ordner und einen 200-zeiligen Gulp-Build-Prozess zu haben, wisst ihr? Es funktionierte am besten als Referenz dafür, was ein Webprojekt brauchen könnte, aber jetzt finde ich es auf eine unnötige Weise einschüchternd. Die Boilerplate-Indexdatei ist auch ziemlich meinungsbildend. Sie setzt Normalize und Modernizr voraus, die sicherlich keine veralteten Projekte sind, aber auch nichts, was Entwickler heutzutage noch viel nutzen. Sie setzt sogar die Nutzung von Google Analytics voraus!

Ich habe nichts dagegen, wenn Leute Boilerplate-Dokumente haben und teilen, aber angesichts dessen, wie unvermeidlich meinungsbildend sie sind, mag ich auch den Ansatz eines Referenzleitfadens. Zeigen Sie mir einfach alles, was im <head> stehen kann (ein großer Teil des Werts dieser Boilerplates), und ich wähle aus, was ich brauche (oder vielleicht vergessen habe). Zu diesem Zweck ist Josh Bucheas HEAD-Projekt ziemlich cool.

Kommentare

Antworten Sie Antwort abbrechen