Les astuces CSS modernes que vous devriez connaître

Hé !

Je veux juste partager mes techniques CSS. Je suis confronté à beaucoup de collègues qui ne le savent pas. Peut-être que vous aussi. J'espère que ce sera intéressant pour vous.

Comment écrire du CSS en fonction du nombre d'enfants

La première solution

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

Ma solution

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

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

Je devais toujours définir l'écart. Même si l'élément n'a qu'un seul élément enfant. On peut l'éviter avec :has()! J'ai fait l'écart est appliqué si uia-control a un minimum de 2 enfants ?

Apportez des modifications en un seul endroit avec des propriétés personnalisées

La première solution

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

.content {
  padding-top: 2rem;
}

Ma solution

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

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

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

Avez-vous besoin de créer un élément dépendant du CSS d'un autre élément ? Vous devez utiliser des propriétés personnalisées ! Cela vous évite des recherches interminables. Apporter des modifications en un seul endroit ?

CSS sans dépendances de commande

La première solution

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

.heading {
  font-size: 1rem;
}

Ma solution

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

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

Un problème d'ordre des règles avec la même spécificité est perceptible lorsque nous avons un composant avec quelques modifications. Mes amis, cela peut être évité. Les propriétés personnalisées CSS vous aideront ?

Mettez les requêtes des médias au régime

La première solution

.intro__heading {
  font-size: 2rem;
}

.intro__description {
  font-size: 1rem;
}

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

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

Ma solution

.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;
  }  
}

Nous devons écrire beaucoup de règles en utilisant des requêtes multimédias. C'est pourquoi le code gonfle. Eh bien, les propriétés personnalisées conservent la taille du code ?

Les cases à cocher personnalisées sont sous stéroïdes avec :has()

La première solution

.cb__input:checked + .cb__label::before {
  /* CSS of the custom checkbox is here */
}

Ma solution

.cb:has(:checked) .cb__label::before {
  /* CSS of the custom checkbox is here */
}

Le combinateur du prochain frère ou sœur présente un inconvénient. C'est cassé si l'ordre des éléments est modifié. :a résolu ce problème ?

P.S. Si vous l'aimez, vous en obtiendrez plus en vous abonnant à ma newsletter.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!