Maîtriser CSS dans le guide CSS définitif pour tous

Mastering CSS in The Definitive CSS Guide for Everyone | Part-2

Table des matières

No.	Section	Link
1	Responsive Design Principles	Link
2	CSS Variables and Custom Properties	Link
3	Animations and Transitions	Link
4	Best Practices and Organization	Link

Principes de conception réactive

Dans le monde multi-appareils d'aujourd'hui, la conception réactive n'est pas facultative : elle est essentielle. Votre site Web doit être superbe, qu'il soit consulté sur un smartphone ou sur un grand écran de bureau.

Requêtes multimédias

Les requêtes multimédias sont votre super pouvoir en matière de conception réactive :

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

Copier après la connexion

Unités réactives

L'utilisation d'unités relatives rend votre conception naturellement réactive :

rem : Par rapport à la taille de la police de l'élément racine
em : Par rapport à la taille de la police de l'élément parent
vw/vh : Par rapport aux dimensions de la fenêtre
% : Par rapport à la taille de l'élément parent

Exercice pratique : Section Service réactif

Créez une section de service réactive qui s'adapte parfaitement aux différentes tailles d'écran à l'aide de requêtes multimédias et d'unités flexibles.

HTML :

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

Copier après la connexion

CSS : explorons des points d'arrêt plus spécifiques pour notre section Service.

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}

Copier après la connexion

Références :

MDN Web Docs - Bases du design réactif - Une excellente introduction aux concepts de design réactif, couvrant la fenêtre d'affichage, les points d'arrêt et les mises en page flexibles.
FreeCodeCamp - Responsive Web Design Certification - Un cours complet couvrant les principes de conception réactive, les grilles, les requêtes multimédias et l'accessibilité.
Puis-je utiliser – Vérifiez la compatibilité du navigateur pour les fonctionnalités de conception réactive telles que les requêtes multimédias et flexbox.
Aide-mémoire pour la conception réactive – Couvre les principales propriétés et techniques de conception réactive dans un format facile à digérer.

Variables CSS et propriétés personnalisées

Les variables CSS (propriétés personnalisées) apportent une flexibilité semblable à celle de la programmation à vos feuilles de style. Ils facilitent l'entretien et permettent un style dynamique.

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}

Copier après la connexion

Exercice pratique : variables CSS pour la thématisation et la réutilisabilité

<body>
    <header>
        <h1>CSS Variables & Custom Properties</h1>
    </header>

    <main>
        <section>





<pre class="brush:php;toolbar:false">/* Define CSS variables (custom properties) in the :root selector */
        :root {
            --primary-color: #3498db; /* Main theme color */
            --secondary-color: #2ecc71; /* Accent color */
            --text-color: #333; /* Default text color */
            --font-size: 16px; /* Base font size */
            --padding: 10px; /* Base padding */
        }

        /* General styles using variables */
        body {
            font-family: Arial, sans-serif;
            font-size: var(--font-size);
            color: var(--text-color);
            margin: 0;
            padding: 0;
            background-color: #f9f9f9;
        }

        header {
            background-color: var(--primary-color);
            color: white;
            text-align: center;
            padding: var(--padding);
        }

        .card {
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin: 20px;
            padding: var(--padding);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .card h2 {
            color: var(--primary-color);
        }

        .card p {
            color: var(--text-color);
        }

        button {
            background-color: var(--secondary-color);
            color: white;
            border: none;
            border-radius: 5px;
            padding: calc(var(--padding) / 2) calc(var(--padding) * 2);
            cursor: pointer;
            font-size: var(--font-size);
        }

        button:hover {
            background-color: var(--primary-color);
        }

        /* Dark mode example by overriding variables */
        body.dark-mode {
            --primary-color: #1abc9c;
            --secondary-color: #e74c3c;
            --text-color: #f9f9f9;
            background-color: #333;
        }

Copier après la connexion

Références :

MDN Web Docs - Utilisation des propriétés personnalisées CSS (variables) - Une explication complète et conviviale pour les débutants avec des exemples sur la définition, l'utilisation et la mise à jour des variables CSS.
W3Schools - Variables CSS - Couvre les bases des variables CSS avec des exemples de code en direct pour une pratique rapide.
Astuces CSS - Un guide complet des propriétés personnalisées - Un guide complet, présentant des cas d'utilisation réels et des conseils pour une utilisation avancée des variables.
Freecodecamp - Manuel complet des variables CSS - Explorez des techniques puissantes telles que les effets en cascade, les variables basées sur les requêtes multimédias et la gestion de la portée.

Animations et transitions

Ajouter du mouvement à votre site Web crée des expériences utilisateur attrayantes. CSS propose deux manières principales de créer une animation :

Transitions

Parfait pour les changements d'état simples :

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

Copier après la connexion

Animations d'images clés

Pour des animations plus complexes en plusieurs étapes :

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

Copier après la connexion

Techniques d'animation avancées

Propriétés personnalisées CSS dans les animations :

/* Base styles - Mobile First (320px and up) */
.services {
    padding: 15px;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: clamp(1.5rem, 5vw, 2.5rem); /* Fluid typography */
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.service-card {
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Smooth transitions for responsive changes */
}

button {
    width: 100%;
    padding: 8px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

/* Small phones (375px and up) */
@media (min-width: 375px) {
    .services {
        padding: 20px;
    }

    .service-card {
        padding: 20px;
    }
}

/* Large phones (480px and up) */
@media (min-width: 480px) {
    .services-container {
        gap: 20px;
    }

    button {
        padding: 10px;
        font-size: 16px;
    }
}

/* Small tablets (600px and up) */
@media (min-width: 600px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 10px); /* Two cards per row with gap consideration */
    }
}

/* Tablets (768px and up) */
@media (min-width: 768px) {
    .services {
        padding: 30px;
    }

    .service-card {
        padding: 25px; /* Improved spacing for larger screens */
    }

    button: hover {
        /* Add hover effect for non-touch devices */
        background: #0056b3;
        transform: translateY(-2px);
    }
}

/* Small laptops (1024px and up) */
@media (min-width: 1024px) {
    .service-card {
        flex: 1; /* Three cards per row */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add subtle hover effect */
    }

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    button {
        /* Change to inline button */
        width: auto;
        padding: 10px 20px;
    }
}

/* Desktops (1200px and up) */
@media (min-width: 1200px) {
    .services {
        padding: 40px;
    }

    .services-container {
        gap: 30px;
    }

    .service-card {
        padding: 30px;
    }
}

/* Extra large screens (1440px and up) */
@media (min-width: 1440px) {
    .services {
        max-width: 1400px; /* Max width to maintain readability */
    }

    .service-card {
        padding: 35px; /* Larger padding for extra large screens */
    }
}

/* Print styles */
@media print {
    .services {
        padding: 0;
    }

    .service-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    button {
        display: none;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    button {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .service-card {
        background: #2a2a2a;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }

    h2 {
        color: #fff;
    }
}

Copier après la connexion

Animation d'images clés avancée :

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --spacing-unit: 1rem;
}

.button {
    background-color: var(--primary-color);
    padding: var(--spacing-unit);
}

Copier après la connexion

Exercice pratique : Carte interactive

Créez une carte interactive avec des effets de survol :

HTML :

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 10px;
}

/* Tablet and larger */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
        padding: 20px;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    .container {
        width: 960px;
    }
}

Copier après la connexion

Références :

MDN Web Docs - Transitions CSS - Une introduction claire aux transitions CSS, expliquant comment créer des effets fluides lors du changement de style.
MDN Web Docs - Animations CSS - Un guide étape par étape sur les images clés, les propriétés d'animation et la création d'animations complexes.
W3Schools - Transitions CSS - Adapté aux débutants avec des éditeurs de code en direct pour pratiquer les transitions et les animations de manière interactive.
W3Schools - Animations CSS - Un guide facile à suivre sur l'utilisation d'images clés et de transitions pour ajouter des animations à un site Web.
Astuces CSS - Animations - Discute des animations réactives, de la réduction des mouvements pour l'accessibilité et de l'intégration des requêtes multimédias.
Animate.css - Une bibliothèque CSS populaire proposant des animations prédéfinies que vous pouvez facilement ajouter à vos projets.

Bonnes pratiques et organisation

Architecture CSS

Utilisez une convention de dénomination cohérente
Organiser les fichiers CSS par composant/fonctionnalité
Gardez la spécificité faible lorsque cela est possible
Commentez efficacement votre code

<section>



<p>CSS:<br>
</p>

<pre class="brush:php;toolbar:false">/* Mobile First Approach */
.services {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.services-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.service-card {
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* Tablet */
@media (min-width: 768px) {
    .services-container {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .service-card {
        flex: 1;
    }

    button {
        width: auto;
        padding: 10px 20px;
    }
}

Copier après la connexion

Exercice pratique : meilleures pratiques pour l'architecture CSS

<!DOCTYPE html>
<html lang="fr">
<tête>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercice d'architecture CSS</title>
    <link rel="stylesheet" href="styles/reset.css"> <!-- Réinitialise les styles de navigateur par défaut -->
    <link rel="stylesheet" href="styles/layout.css"> <!-- Styles liés à la mise en page -->
    <link rel="stylesheet" href="styles/components/header.css"> <!-- Styles des composants d'en-tête -->
    <link rel="stylesheet" href="styles/components/card.css"> <!-- Styles des composants de la carte -->
    <link rel="stylesheet" href="styles/utilities.css"> <!-- Classes utilitaires pour des solutions rapides -->
&Lt;/tête>
<corps>
    <en-tête>



<h3>
  
  
  Références :
</h3>

Copier après la connexion

BEM - Block Element Modifier - Une méthodologie populaire pour nommer les classes CSS et structurer vos styles afin d'améliorer la réutilisabilité et la maintenabilité.
SMACSS - Architecture évolutive et modulaire pour CSS - Un cadre détaillé pour organiser CSS en catégories logiques et maintenables.
Lignes directrices CSS par Harry Roberts - Un guide de haute qualité pour écrire du CSS évolutif et maintenable avec une structure de fichier logique et des conventions de dénomination.

Il est temps de construire ! ?

C'est maintenant à votre tour de mettre en pratique votre apprentissage ! Voici votre défi :

Créez un nouveau CodePen (c'est gratuit sur codepen.io)
Construisez les exemples et les exercices que nous avons abordés
Partagez votre création ! Déposez votre lien CodePen dans les commentaires ci-dessous

Points bonus : ajoutez votre propre touche créative aux designs ! J'examinerai personnellement et répondrai à chaque CodePen partagé dans les commentaires.

? Conseil de pro : N'oubliez pas d'ajouter des commentaires dans votre CSS pour expliquer votre réflexion. Cela aide les autres à apprendre de votre code !

Quelle est la prochaine étape ? ?

Il s'agit de la deuxième partie de notre série CSS Zero to Hero. Nous approfondirons des concepts CSS plus intéressants dans les prochains articles. Pour ne rien manquer :

? Ajoutez cet article à vos favoris pour une référence rapide lorsque vous codez
❤️ Aimez cet article si vous l'avez trouvé utile (il aide les autres à le trouver aussi !)
? Suivez-moi pour les prochains volets de la série

Connectons-nous ! ?

Avez-vous essayé les exercices ? Vous avez des questions ? Partagez votre expérience dans les commentaires ! Je réponds à chaque commentaire et j'adore voir vos progrès.

Rendez-vous dans la troisième partie ! Bon codage ! ?‍??‍?

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!