CSS Snippets, die das Leben leichter machen

box-sizing: border-box 

CSS verwendet standardmäßig content-box. Dabei vergrößern Innenabstände und Rahmen die Gesamtmaße eines Elements. Dieses Verhalten entspricht selten dem gewünschten Layout.

  *, 

  *::before, 

  *::after { 

    box-sizing: border-box; 

  }

Mit diesen Eigenschaften sind Media Queries seltener nötig

Modernes CSS bietet uns Tools, die automatisch auf die Bildschirmgröße reagieren.

  .container { 

    width: min(90%, 1200px); 

  }

Oder:

  font-size: clamp(1rem, 2.5vw, 1.5rem);

Mit clamp() passt sich die Textgröße fließend an. Sie benötigt keine festen Breakpoints. min() und max() regeln die responsive Anpassung direkt und einfach.

Grid öfter statt Flexbox verwenden für klarere Strukturen

• Flexbox → eindimensional (Zeile oder Spalte)
• Grid → zweidimensional (Zeilen und Spalten)

  .grid { 

    display: grid; 

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 

  }

gap funktioniert in Flexbox 

  .flex { 

    display: flex; 

    gap: 1rem; 

  }

:not()

Mit :not() sind neue Klassen wesentlich weniger oft notwendig.

  button:not(.primary) { 

    opacity: 0.7; 

  }

Oder:

  li:not(:last-child) { 

    margin-bottom: 0.5rem; 

  }

currentColor

currentColor verwendet den Farbwert des Elements – das bedeutet, dass Rahmen, Symbole und SVGs automatisch synchronisiert werden können.

  .icon { 

    color: #4f46e5; 

    border: 1px solid currentColor; 

  }

object-fit

Mit object-fit werden img mühelos responiv.

  img { 

    width: 100%; 

    height: 100%; 

    object-fit: cover; 

  }

cover füllt den container, contain zeigt das ganze Bild.

CSS-Variablen steuern Eigenschaften, nicht nur Farben

  :root { 

    --primary: #4f46e5; 

  }

Variablen kommen jedoch dann besonders gut zur Geltung, wenn sie Eigenschaften steuern.

  .card { 

    --radius: 12px; 

    border-radius: var(--radius); 

  }

Oder:

  button { 

    transform: scale(var(--scale, 1)); 

  } 

  button:hover { 

    --scale: 1.05; 

  }

:where()

Probleme mit der Spezifität in CSS machen oft sehr viel Mühe.

:where()  hat keine Spezifität.

  :where(h1, h2, h3) { 

    margin-bottom: 0.5em; 

  }

Es kann später ohne !important überschrieben werden.

Manchmal ist die beste Lösung CSS einfach zu löschen

Diesen Trick zu lernen, ist am schwersten.

Wenn das Stylesheet voller Überschreibungen, Hacks und !important ist, liegt das Problem meistens nicht an fehlendem CSS. Das Problem ist zu viel CSS.

Frage dich, bevor du eine neue Regel hinzufügst:

• Kann ich stattdessen etwas löschen?
• Widerspricht die neue Regel einer älteren Entscheidung?
• Gehört diese Regel in die Komponente und nicht zu den globalen Stilen?