Sauberer Code

Sauberer Code ist gut strukturierter, verständlicher und konsistent geschriebener Code. Er ist leichter zu lesen, schneller zu überarbeiten und hilft dabei, Fehler früher zu erkennen.

Schritt für Schritt zu sauberem Code

  1. Den Grundaufbau eines HTML-Dokuments klar halten: Der <head> enthält Metadaten, Titel und Stylesheets. Scripts kommen ans Ende des <body>, damit zuerst die sichtbaren Inhalte geladen werden und das Skript die vorhandenen Elemente direkt vorfindet. Im <body> liegen die Inhalte in einer logischen Reihenfolge, zum Beispiel <header>, <main> mit <section>s und am Ende ein <footer>.

    <!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Seitenname</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>...</header>
    <main>
      <section>...</section>
    </main>
    <footer>...</footer>
    <script src="script.js"></script>
  </body>
</html>

    HTML

  2. Einrückung und Tag-Paare prüfen: Achte darauf, dass verschachtelte Elemente immer eine Ebene weiter eingerückt sind. Kontrolliere außerdem, dass zu jedem öffnenden Tag der passende schließende Tag existiert.

    <section>
  <h2>Kontakt</h2>
  <p>Schreib mir eine Nachricht.</p>
</section>

    HTML

  3. Leerzeilen und Kommentare nutzen: Trenne unterschiedliche Inhaltsblöcke mit Leerzeilen und setze kurze, beschreibende Kommentare direkt vor den nächsten Abschnitt.

    <!-- Intro-Bereich -->
<section id="intro">
  <h2>Willkommen</h2>
</section>

<!-- Galerie-Bereich -->
<section id="galerie">
  <h2>Galerie</h2>
</section>

    HTML

  4. Nicht benötigte Dateien löschen: Entferne alte Entwürfe, Dubletten und Testdateien, die nicht mehr eingebunden sind. Das macht Projekte übersichtlicher und reduziert Fehlerquellen.

    projekt/
  index.html
  style.css
  bilder/

Nicht mehr gebraucht:
- index-neu-neu.html
- style-alt.css
- test-final-wirklich-final.html

    Text

  5. Integrierten Formatter nutzen: Formatiere deinen Code direkt in Visual Studio Code über Format Document oder mit dem Shortcut Shift + Alt + F. So werden Einrückungen automatisch vereinheitlicht.

    <section>
<h2>Kontakt</h2>
<p>Schreib mir eine Nachricht.</p>
</section>

Nach dem Formatieren:

<section>
  <h2>Kontakt</h2>
  <p>Schreib mir eine Nachricht.</p>
</section>

    HTML

  6. CSS übersichtlich gliedern: Sortiere Regeln nach Komponenten und nutze sprechende Klassennamen. Wiederkehrende Werte kannst du mit CSS-Variablen zentral halten.

    :root {
  --farbe-akzent: #1f6f50;
  --abstand-m: 1rem;
}

/* Button-Komponente */
.button-primary {
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 0.4rem;
  background: var(--farbe-akzent);
  color: #fff;
}

.button-primary:hover {
  opacity: 0.9;
}

    CSS

  7. JavaScript in kleine Funktionen aufteilen: Verwende klare Funktionsnamen und trenne Logik in einzelne Schritte. Das verbessert Lesbarkeit und Wiederverwendung.

    const toggleButton = document.querySelector("#navigation-toggle");
const navigation = document.querySelector("#navigation");

function toggleNavigation() {
  const isOpen = navigation.classList.toggle("is-open");
  toggleButton.setAttribute("aria-expanded", String(isOpen));
}

toggleButton.addEventListener("click", toggleNavigation);

    JavaScript