Des astuces SS qui vous feront gagner beaucoup de temps

Travailler avec CSS est toujours un cauchemar pour les développeurs back-end. Ici, conspirons contre ces développeurs front-end et apprenons quelques astuces CSS qui manquent même aux développeurs front-end.

1. Astuce de centrage dans Flexbox

Commençons par le fameux problème de centrage des divs. Ici, nous utiliserons une flexbox. Pas besoin de définir un positionnement absolu ni de travailler avec des marges, faites ceci :

  .flex-center-demo {
    display: flex;
    justify-content: center;
    align-items: center;
  }

2. Placement automatique rapide de la grille

Vous en aurez besoin si vous concevez des barres de navigation ou un tableau de bord. Si vous avez une collection d'objets et que vous devez les placer ensemble, utilisez-le.

.auto-grid-demo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

Il remplit automatiquement les lignes avec des cases d'une largeur minimale de 120 px.

3. Sélecteur de frères et sœurs adjacents

Ceci est utile lorsque vous avez des éléments adjacents, des éléments qui viennent après un titre par exemple le nom de l'auteur sous le titre.

h2 + p {
    font-style: italic;
    color: blue;
  }

Voici une image :

4. Utiliser la pseudo-classe not()

Lorsque vous concevez un élément et qu'un élément, vous devez le concevoir différemment, par exemple, utilisez-le. Voici un exemple de collection de cases, appliquez le CSS sauf la troisième qui appartient à une classe spéciale.

.box:not(.special) {
    background-color: #3498db;
    color: #fff;
    margin: 0.5rem;
    padding: 1rem;
    border-radius: 4px;
  }

5. Clouez l’animation CSS comme un pro

Obtenir des animations CSS du premier coup est un peu problématique. Utilisez ces images clés pour simplifier des animations complexes en une seule règle facile à ajuster ou à réutiliser.

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-demo {
  animation: fadeIn 3s forwards;
  background-color: #e67e22;
  color: #fff;
  padding: 1rem;
  text-align: center;
  border-radius: 4px;
}

Astuce bonus !

Voici une astuce de débogage CSS supplémentaire que j'utilise toujours. Si vous pensez que vous avez foiré le CSS et que vous n'avez aucune idée de ce qui ne va pas, essayez de placer ces cases autour de chaque élément que vous avez. Cela m'a été très utile pour déboguer CSS.

/* Debug: Outline every element with a red border */
* {
  outline: 1px solid red !important;
}

J'espère que cet article vous sera utile. Je m'appelle Sreedeep et je travaille sur un outil appelé LiveAPI - Aider les gens à générer efficacement des documents API avec l'IA.

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!