Typo spacing - one selector to rule them all

Ich habe in meinem ersten Anlauf ein CSS-Framework für Conta zu schreiben, viel mit den richtigen Regeln für die Abstände in Text-Containern zu kämpfen. Das hat dazu geführt, dass ich immer mehr Ausnahmeregeln schreiben musste und die Spezifität meiner CSS-Regeln immer weiter gestiegen ist.
Ich glaube jetzt eine sehr schlanke und flexible Variante gefunden zu haben, die ohne unnötige Sonderfälle auskommt.

Mit dem Owl-Selektor und em :D

Alle Credits gehen an Kevin Powell, die Regel ist aus seinem Kurs von Frontend Masters.

Code:

---

.flow > * + * {
    margin-block-start: var(--spacing-flow-inline, 1em);
}

---

Selektor: .flow > * + *

• * + * bedeutet: „jedes Element, das einem anderen Element direkt folgt“.
• Damit wird immer nur das zweite, dritte, vierte usw. Kind innerhalb von .flow angesprochen, nie das erste.
• Ergebnis: Das erste Element bekommt kein Margin, alle folgenden schon. So entsteht gleichmäßiger Abstand zwischen den Elementen.
• Vorteil: Kein :first-child nötig, dadurch bleibt die Spezifität sehr niedrig.

Abstände mit margin-block-start

• Statt klassischem margin-top wird hier die logische Eigenschaft margin-block-start genutzt.
• Vorteil: Sie richtet sich nach der Schreibweise/Schreibrichtung (z. B. für Sprachen von rechts nach links oder vertikale Schriften).
• Idee: Der Abstand gehört über das nächste Element, nicht unter das vorherige.

Nutzung von em statt rem

• em bezieht sich auf die Schriftgröße des Elements selbst.
• Vorteil bei em: Abstände skalieren automatisch mit der Font-Size.
• Große Headlines haben automatisch größeren Abstand.

Custom Property mit Fallback