unbekannte CSS-Techniken

Hey!

Ich möchte nur meine CSS-Techniken teilen. Ich habe viele Kollegen, die das nicht wissen. Vielleicht auch du. Ich hoffe, es wird für Sie interessant sein.

So schreiben Sie CSS abhängig von der Anzahl der Kinder

Die erste Lösung

.uia-control {
  display: inline-flex;
  gap: 1rem;
  /* remaining CSS */
}

Meine Lösung

.uia-control {
  display: inline-flex;
  /* remaining CSS */
}

.uia-control:has(> :nth-child(2)) {
  gap: 1rem;
}

Ich musste Lücke immer definieren. Auch wenn das Element nur ein untergeordnetes Element hat. Wir können es mit :has() vermeiden! Ich habe die Lücke angewendet, wenn uia-control mindestens 2 Kinder hat?

Nehmen Sie mit benutzerdefinierten Eigenschaften Änderungen an einem Ort vor

Die erste Lösung

.banner {
  height: 2rem;
  position: fixed;
}

.content {
  padding-top: 2rem;
}

Meine Lösung

:root {
  --page-banner-height: 2rem;
}

.banner {
  height: var(--page-banner-height);
  position: fixed;
}

.content {
  padding-top: var(--page-banner-height);
}

Müssen Sie ein Element mit Abhängigkeit vom CSS eines anderen Elements erstellen? Sie sollten benutzerdefinierte Eigenschaften verwenden! Es erspart Ihnen endloses Suchen. Änderungen an einem Ort vornehmen?

CSS ohne Auftragsabhängigkeiten

Die erste Lösung

.heading_size-l {
  font-size: 2rem;
}

.heading {
  font-size: 1rem;
}

Meine Lösung

.heading_size-l {
  --heading-font-size: 2rem;
}

.heading {
  font-size: var(--heading-font-size, 1rem);
}

Ein Problem mit der Regelreihenfolge mit derselben Spezifität macht sich bemerkbar, wenn wir eine Komponente mit einigen Änderungen haben. Leute, es kann vermieden werden. Benutzerdefinierte CSS-Eigenschaften helfen?

Setzen Sie Medienanfragen auf Diät

Die erste Lösung

.intro__heading {
  font-size: 2rem;
}

.intro__description {
  font-size: 1rem;
}

@media (width >= 641px) {
  .intro__heading {
    font-size: 3rem;
  }

  .intro__description {
    font-size: 2rem;
  }  
}

Meine Lösung

.intro__heading {
  font-size: var(--intro-heading-font-size, 2rem);
}

.intro__description {
  font-size: var(--intro-description-font-size, 1rem);
}

@media (width >= 641px) {
  .intro {
    --intro-heading-font-size: 3rem;
    --intro-description-font-size: 2rem;
  }  
}

Wir müssen viele Regeln schreiben, indem wir Medienabfragen verwenden. Aus diesem Grund bläht sich der Code auf. Nun, benutzerdefinierte Eigenschaften behalten die Codegröße bei ?

P.S. Wenn es Ihnen gefällt, erhalten Sie mehr, indem Sie meinen Newsletter abonnieren.

Das obige ist der detaillierte Inhalt vonunbekannte CSS-Techniken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!