HTML & CSS – Best Practises

CSS lässt sich einfach in HTML einbinden. Siehe CSS Stylesheets einbinden. Viele Webdesigner legen direkt los und da die Ergebnisse direkt sichtbar werden, vernachlässigen sie oft elementare Best-Practises, die Ihnen das Leben einfacher machen würden.


1. Strukturierte und semantische HTML-Elemente

Bedeutung von semantischen HTML-Tags

Semantische HTML-Tags sind spezielle Elemente, die dem Browser und den Suchmaschinen helfen, den Inhalt deiner Webseite besser zu verstehen. Anstatt generische Tags wie <div> und <span> zu verwenden, solltest du semantische Tags wie <header>, <nav>, <article>, <section> und <footer> nutzen. Diese Tags vermitteln die Bedeutung und Struktur deiner Inhalte und erleichtern das Styling mit CSS.

Anwendung von CSS-Styling auf semantische Elemente

Semantische HTML-Elemente lassen sich problemlos mit CSS stylen. Du kannst CSS-Selektoren und Attribute verwenden, um das Erscheinungsbild dieser Elemente anzupassen. Zum Beispiel kannst du den Text innerhalb eines <article> Elements so gestalten, dass er gut lesbar ist:

article {
  font-size: 1.2em;
  line-height: 1.5;
  margin: 1em 0;
}

Vorteile semantischer HTML-Elemente für CSS

Die Verwendung von semantischen HTML-Elementen bietet viele Vorteile für die Gestaltung deiner Webseite. Zum einen verbessert es die Lesbarkeit deines Codes, sowohl für dich als auch für andere Entwickler. Zum anderen ermöglicht es Browsern und Suchmaschinen, den Inhalt deiner Seite besser zu verstehen, was die SEO (Search Engine Optimization) und Barrierefreiheit verbessert.


2. CSS-Selektoren und HTML-Struktur

Effiziente Nutzung von CSS-Selektoren

Um effizient und sauber mit HTML und CSS zu arbeiten, ist es wichtig, die richtigen CSS-Selektoren zu verwenden. Du solltest möglichst präzise Selektoren nutzen, um nur die gewünschten Elemente anzusprechen und unerwünschte Stiländerungen zu vermeiden. Hier ein Beispiel:

nav ul li a {
  text-decoration: none;
  color: #333;
}

Verwendung von Klassen, IDs und Attributselektoren

Bei der Gestaltung deiner Webseite solltest du Klassen und IDs nutzen, um Elemente gezielt anzusprechen. Klassen eignen sich besonders für wiederkehrende Stile, während IDs für einmalige Elemente auf deiner Seite verwendet werden sollten. Attribute wie data-* können ebenfalls zur Auswahl von Elementen herangezogen werden. Zum Beispiel:

<button class="btn-primary" data-toggle="modal">Öffne Modal</button>

Und in deinem CSS:

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}


Geschachtelte Selektoren und deren Auswirkung auf HTML-Elemente

Geschachtelte Selektoren helfen dabei, die Beziehung zwischen verschiedenen HTML-Elementen zu verdeutlichen und das Styling präziser zu gestalten. Du kannst geschachtelte Selektoren verwenden, um das Styling von Elementen basierend auf ihrer Position im HTML-Dokument anzupassen. Zum Beispiel:

.card {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
padding: 1em;
}

.card:hover { background-color: #e9ecef; border-color: #ced4da; }

.card img { width: 100%; height: auto; display: block; }

3. Verknüpfung von HTML und CSS für Responsive Webdesign

Mobile-first-Ansatz und Media Queries

Ein Mobile-first-Ansatz bedeutet, dass du zuerst das Design für Mobilgeräte entwickelst und anschließend mithilfe von Media Queries das Design für größere Bildschirme anpasst. Zum Beispiel:

.container {
  width: 100%;
  padding: 1em;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

Mehr zu Media Queries findest du hier: Responsive Webdesign mit HTML & CSS

Anpassung der HTML-Struktur für verschiedene Bildschirmgrößen

In einigen Fällen kann es notwendig sein, die HTML-Struktur an verschiedene Bildschirmgrößen anzupassen. Mit CSS Grid und Flexbox kannst du die Anordnung von Elementen einfach und effizient ändern. Zum Beispiel:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1em;
}


Flexbox und CSS Grid für flexible Layouts

Flexbox und CSS Grid sind leistungsstarke Werkzeuge zur Gestaltung flexibler Layouts. Beide Techniken ermöglichen es, Elemente dynamisch anzuordnen und den verfügbaren Platz optimal zu nutzen. Zum Beispiel:

<header class="flex-container">
  <div class="logo">Logo</div>
  <nav class="navigation">Navigation</nav>
</header>
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


4. Dynamische Webinhalte und Interaktionen

Anwendung von CSS-Pseudoklassen auf HTML-Elemente

CSS-Pseudoklassen wie :hover, :focus und :active bieten dir die Möglichkeit, das Verhalten von HTML-Elementen basierend auf Benutzerinteraktionen zu ändern. Zum Beispiel:

.button {
  background-color: #007bff;
  color: #fff;
  padding: 0.5em 1em;
  text-decoration: none;
}

.button:hover,
.button:focus {
  background-color: #0056b3;
  color: #fff;
}


CSS-Animationen und HTML-Elemente

Mit CSS-Animationen kannst du Bewegung und Interaktivität in deine Webseite einbringen. CSS-Animationen haben gegenüber JavaScript-Animationen den Vorteil, dass sie performanter sind und weniger Ressourcen verbrauchen. Zum Beispiel:

<div class="animated-box"></div>
.animated-box {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

Ein weiteres Beispiel für eine gelungene CSS Animation.

Benutzerinteraktionen: Fokus, Hover und Active-Stile

Es ist wichtig, die Benutzererfahrung zu berücksichtigen und das Verhalten von HTML-Elementen basierend auf Benutzerinteraktionen anzupassen. Du kannst Pseudoklassen wie :hover, :focus und :active verwenden, um Stile für verschiedene Interaktionszustände festzulegen:

a {
  color: #007bff;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #0056b3;
  text-decoration: underline;
}

a:active {
  color: #003580;
}


5. Barrierefreiheit und das Zusammenspiel von HTML und CSS

ARIA-Attribute in HTML für zugängliche Inhalte

ARIA-Attribute (Accessible Rich Internet Applications) bieten zusätzliche Informationen über die Struktur und Funktion von HTML-Elementen, um die Barrierefreiheit zu verbessern. Zum Beispiel:

<nav aria-label="Hauptnavigation">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Kontakt</a></li>
  </ul>
</nav>


Visuelle Darstellung von zugänglichen Elementen mit CSS

Bei der Gestaltung deiner Webseite solltest du auch die visuelle Darstellung von zugänglichen Elementen berücksichtigen. Zum Beispiel kannst du dafür sorgen, dass Links und Schaltflächen bei Fokus oder Hover deutlich hervorgehoben werden:

a:focus,
button:focus {
  outline: 2px solid #007bff;
}


Anpassbare Schriftgrößen und Farbkontraste

Um die Lesbarkeit und Zugänglichkeit deiner Webseite zu verbessern, solltest du auf anpassbare Schriftgrößen und ausreichende Farbkontraste achten. Verwende relative Einheiten wie em oder rem für Schriftgrößen und wähle Farbkombinationen, die den WCAG-Richtlinien (Web Content Accessibility Guidelines) entsprechen:

body {
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
}


6. Wartbarer und modularer Code

BEM-Methodik und HTML-Struktur

Die BEM-Methodik (Block, Element, Modifier) ist eine populäre Naming-Konvention für CSS-Klassen, die hilft, deinen Code besser strukturiert, leichter verständlich und wartbarer zu gestalten. Hier ein Beispiel:

<div class="card">
  <div class="card__header">
    <h2 class="card__title">Titel</h2>
  </div>
  <div class="card__content">
    <p class="card__text">Inhalt...</p>
  </div>
  <div class="card__footer">
    <button class="card__button card__button--primary">Aktion</button>
  </div>
</div>

.card {
  /* Stile für den Block */
}

.card__header {
  /* Stile für das Element "header" */
}

.card__button--primary {
  /* Stile für den Modifikator "primary" des Elements "button" */
}


HTML-Templates und CSS-Preprozessoren

HTML-Templates und CSS-Preprozessoren wie Sass oder Less können dir dabei helfen, deinen Code modularer und wartbarer zu gestalten. Du kannst Teile deines HTML-Codes in separate Dateien auslagern und mit CSS-Preprozessoren Variablen, Mixins und Funktionen verwenden, um wiederkehrende Stile zentral zu definieren:

<!-- HTML-Template: card.html -->
<div class="card">
  <!-- ... -->
</div>
// Sass-Datei: _variables.scss
$primary-color: #007bff;

// Sass-Datei: _mixins.scss
@mixin button-styles {
  background-color: $primary-color;
  color: #fff;
  padding: 0.5em 1em;
  text-decoration: none;
}

// Haupt-Sass-Datei: main.scss
@import "variables";
@import "mixins";

.button {
  @include button-styles;
}


CSS-Variablen für konsistente Gestaltungselemente

CSS-Variablen (auch Custom Properties genannt) sind eine moderne Methode, um zentrale Gestaltungselemente wie Farben, Schriftgrößen und Abstände in deinem CSS-Code zu definieren und zu verwalten. So kannst du konsistente Stile auf deiner gesamten Webseite gewährleisten und Änderungen einfacher vornehmen:

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --font-size-base: 1rem;
  --spacing-base: 1em;
}

body {
  font-size: var(--font-size-base);
  color: var(--secondary-color);
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing-base);
}
Nach oben scrollen