Code Patterns

Bewährte Lösungen die ich gesammelt habe.

1. Modern CSS Reset

Minimaler Reset für konsistentes Verhalten in allen Browsern.

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

Quelle: Josh Comeau

2. Container Queries Responsive ohne Media Queries

.card-container {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: grid;
  gap: 1rem;
}

/* Wenn Container > 400px */
@container card (min-width: 400px) {
  .card {
    grid-template-columns: 150px 1fr;
  }
}

Komponente reagiert auf ihren Container, nicht auf Viewport

3. Logical Properties RTL-ready

❌ Physisch

margin-left: 1rem;
padding-right: 2rem;
border-top: 1px solid;

✅ Logisch

margin-inline-start: 1rem;
padding-inline-end: 2rem;
border-block-start: 1px solid;

Funktioniert automatisch in RTL-Sprachen (Arabisch, Hebräisch)

4. Parent Selector mit :has() Game Changer

/* Form-Group rot wenn Input invalid */
.form-group:has(input:invalid) {
  border-color: red;
}

/* Card anders stylen wenn sie ein Bild hat */
.card:has(img) {
  grid-template-rows: 200px 1fr;
}

/* Body Style basierend auf Modal */
body:has(.modal[open]) {
  overflow: hidden;
}

5. Fluid Typography clamp() Magic

:root {
  /* Min 16px, Max 20px, Fluid dazwischen */
  --text-base: clamp(1rem, 0.5rem + 1vw, 1.25rem);
  
  /* Min 24px, Max 48px */
  --text-heading: clamp(1.5rem, 1rem + 3vw, 3rem);
}

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

h1 {
  font-size: var(--text-heading);
}

Kein Breakpoint nötig — skaliert smooth

6. Aspect Ratio Bye bye Padding Hack

1:1

16:9

4:3

.square { aspect-ratio: 1; }
.video { aspect-ratio: 16 / 9; }
.photo { aspect-ratio: 4 / 3; }