La clé pour ma?triser la conception CSS moderne est la mise en page, la réactivité et la maintenabilité. 1. Utilisez CSS Grid et Flexbox pour combiner la disposition. La grille convient aux structures bidimensionnelles telles que la page entière, et Flexbox convient aux arrangements unidimensionnels tels que les groupes de boutons; 2. Utilisez des variables CSS pour réaliser la commutation de thème, définir les variables de couleur et la commutation dynamique avec JavaScript; 3. Priorité mobile et gérer les détails réactifs, adopter des unités relatives, des attributs d'image SRCSET et des requêtes médiatiques centralisées; 4. Améliorer la maintenabilité, utiliser le BEM et d'autres spécifications de dénomination, les modules divisés, les niveaux de nidification de contr?le et les composants et les styles de mise en page séparés. Ces combinaisons de techniques peuvent améliorer considérablement la qualité du code.

Lors de l'écriture de CSS dans la conception Web moderne, la clé n'est pas de ma?triser le nombre de sélecteurs ou d'attributs d'animation, mais de comprendre la disposition, la réactivité et la maintenabilité. Beaucoup de gens sont coincés après avoir appris le CSS de base et ne savent pas comment écrire du code de style plus flexible et moderne. Cet article parle de plusieurs techniques avancées mais pratiques pour vous aider à percer ce goulot d'étranglement.

Disposition combinée avec la grille CSS et Flexbox

Flexbox est bon dans les dispositions unidimensionnelles (telles que les barres de navigation, les groupes de bouton), tandis que la grille est plus adaptée aux dispositions bidimensionnelles (comme la structure entière de la page). Les deux ne sont pas des relations de substitution, mais complémentaires.

Pour donner un exemple pratique: vous faites une page de tableau de bord, avec la barre latérale à gauche et la zone de contenu à droite. La grille peut être utilisée pour diviser la structure globale:

 .tableau de bord {
  Affichage: grille;
  Grid-Template-Colonnes: 250px 1FR;
}

Utilisez ensuite les composants de la carte de mise en page Flexbox dans la zone de contenu:

 .cards {
  Affichage: flex;
  écart: 1rem;
  wrap flex: enveloppement;
}

Cette combinaison maintient non seulement la structure globale claire, mais rend également les éléments internes plus flexibles.

suggestion:

• Grille à utiliser pour la première fois pour diviser de grandes zones
• Ensuite, utilisez Flexbox pour traiter la disposition des éléments dans la région
• Ne vous forcez pas à résoudre le problème avec une seule solution

Utilisation flexible des variables CSS pour réaliser le changement de sujet

Les propriétés personnalisées CSS (c'est-à-dire les variables souvent appelées variables) ne sont pas seulement pour écrire des valeurs moins en double, son réel avantage est de contr?ler dynamiquement le style.

Par exemple, vous pouvez définir un ensemble de variables de couleur:

 :racine {
  - primaire-couleur: # 4A90E2;
  --BG-Color: # F5F5F5;
}

Reportez ensuite à ces variables dans le composant:

 .bouton {
  Color d'arrière-plan: var (- couleur primaire);
}

Vous voulez changer le thème? Modifiez simplement la valeur de la variable:

 .Dark-thème {
  - primaire-couleur: # 6EC1FF;
  --BG-Color: # 1A1A1A;
}

Couplé à JavaScript pour changer dynamiquement les noms de classe, vous pouvez réaliser un commutateur en un clic entre le mode Night Mode / Jour.

Conseils:

• Variables de mise au point dans :root ou de sujets
• Reconna?tre automatiquement le mode sombre avec la requête multimédia
• Peut être compatible avec les anciens navigateurs à l'aide du plug-in PostCSS

Gestion détaillée de la conception réactive d'abord mobile

"Mobile First" n'est plus un nouveau concept, mais beaucoup de gens ajoutent simplement l'étiquette Meta View et la terminent. Une conception vraiment réactive devrait considérer les paramètres de point d'arrêt, l'adaptation des polices, l'échelle d'image et d'autres aspects.

Les pratiques recommandées sont:

• Commencez à écrire des styles à partir d'un petit écran et à les améliorer progressivement
• Utilisez des unités relatives (EM / REM / VW / VH)
• Les images sont appariées avec srcset et les attributs sizes avec max-width: 100%
• Les requêtes multimédias doivent être concentrées à l'intérieur des composants, et non des fichiers individuels

Par exemple, un composant d'image réactif peut être écrit comme ceci:

 <img 
  src = "small.jpg" 
  srcset = "small.jpg 480w, moyen.jpg 800w, grand.jpg 1200w"
  tailles = "(max-largeur: 600px) 100vw, 800px"
  alt = "Exemple d&#39;image"
/>

De cette fa?on, le navigateur sélectionnera automatiquement l'image la plus appropriée à charger en fonction de la largeur de l'appareil, enregistrant le trafic et améliorant les performances.

écrivez une structure CSS plus facile à maintenir

à mesure que le projet grossir, CSS peut facilement devenir désordonné. Afin d'éviter le problème de ?ne pas oser supprimer? au stade ultérieur, il est recommandé de prêter attention à la méthode de l'organisation depuis le début.

Les pratiques courantes sont:

• Utilisez des spécifications de dénomination comme BEM ou SMACSS
• Diviser CSS en modules (tels que _buttons.scss , _layout.scss )
• évitez la nidification excessive et contr?lez le niveau en 3 couches
• Le style des composants et le style de mise en page sont écrits séparément

Si vous utilisez un framework à outils comme Tailwind ou Bootstrap, veillez à ne pas compter sur la classe d'utilité pour la construire. Résumé de manière appropriée Certaines classes réutilisées peuvent rendre le code plus clair.

Fondamentalement, c'est tout. Le CSS avancé ne signifie pas que vous devez utiliser une fonctionnalité intéressante, mais sait quand et quelles méthodes utiliser pour écrire des codes de style avec une structure claire, une forte évolutivité et une maintenance pratique. De nombreuses techniques semblent simples, mais lorsqu'elles sont combinées, elles sont la clé de la conception Web moderne.

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!