Chapitre 25 | Classes combinées et des déclarations communes

Utilisation des classes combinées et des déclarations communes

il est possible de définir des propriétés communes pour plusieurs éléments en créant une classe dédiée (par exemple, titre-commun ou paragraphe-commun). Ensuite, on peut ajouter des classes spécifiques pour apporter des variations à chaque titre ou paragraphe.

L’intérêt de cette méthode est d’éviter de répéter les mêmes déclarations pour chaque élément, ce qui rend le code plus propre et plus facile à maintenir.

Voici un exemple :

<!-- Titre avec des propriétés communes et spécifiques -->
<h1 class="titre-commun mon-titre-1">Titre principal avec un style spécifique.</h1>
<h1 class="titre-commun mon-titre-2">Titre secondaire avec une variation.</h1>

<!-- Paragraphe avec des propriétés communes et spécifiques -->
<p class="paragraphe-commun mon-paragraphe-1">Premier paragraphe avec un style unique.</p>
<p class="paragraphe-commun mon-paragraphe-2">Deuxième paragraphe avec une autre variation.</p>

/* Propriétés communes à tous les titres */
.titre-commun {
  font-family: Arial, sans-serif; /* Police commune */
  font-size: 24px; /* Taille commune */
  color: black; /* Couleur commune */
  margin-bottom: 10px; /* Espacement commun */
}

/* Propriétés spécifiques aux titres */
.mon-titre-1 {
  color: blue; /* Couleur spécifique */
  text-decoration: underline; /* Soulignement spécifique */
}

.mon-titre-2 {
  color: green; /* Couleur spécifique */
  font-style: italic; /* Italique spécifique */
}

/* Propriétés communes à tous les paragraphes */
.paragraphe-commun {
  font-family: Georgia, serif; /* Police commune */
  font-size: 16px; /* Taille commune */
  line-height: 1.5; /* Hauteur de ligne commune */
  color: darkgray; /* Couleur commune */
  margin-bottom: 15px; /* Espacement commun */
}

/* Propriétés spécifiques aux paragraphes */
.mon-paragraphe-1 {
  color: darkblue; /* Couleur spécifique */
  letter-spacing: 1px; /* Espacement entre lettres spécifique */
}

.mon-paragraphe-2 {
  color: darkred; /* Couleur spécifique */
  text-align: justify; /* Alignement spécifique */
}

Résultat :

Exercice :

Ajoutez une classe titre-commun pour définir des styles communs à tous les titres de votre page, comme une police, une taille et un espacement.
Créez deux titres avec des classes spécifiques (mon-titre-1 et mon-titre-2) pour apporter des variations : par exemple, une couleur et un style différents.
Faites la même chose pour les paragraphes : une classe paragraphe-commun pour les styles communs, et des classes spécifiques pour apporter des variations.
Expérimentez en ajoutant un troisième titre ou paragraphe pour vérifier que le style commun est toujours appliqué.

Note pédagogique :

Cette méthode permet de montrer l’avantage de la cascade en CSS et l’organisation des styles :

Les classes communes définissent une base cohérente.
Les classes spécifiques permettent des variations sans répétition de code.

Synthèse des apprentissages

Dans ce chapitre, vous avez appris les bases pour styliser les textes en CSS :

Alignement des textes avec text-align pour définir leur position (gauche, centre, droite, justifié).

Transformation de texte avec text-transform pour contrôler la casse (majuscule, minuscule, etc.).

Décoration de texte avec text-decoration pour ajouter des effets comme soulignement, surlignement ou barré.

Espacements avec line-height, letter-spacing et word-spacing pour ajuster les intervalles.

Couleurs et opacité avec color et opacity pour personnaliser l’apparence et la transparence.

Combinaisons de styles

Vous pouvez combiner plusieurs propriétés pour un élément.

Classes communes et spécifiques

Utilisez des classes communes pour définir des styles partagés et des classes spécifiques pour apporter des variations.

Le rôle du CDUI et à propos de votre mémoire

En tant que concepteur designer UI, il est essentiel de comprendre les bases du CSS, mais il est inutile et irréaliste de mémoriser toutes les propriétés, valeurs et combinaisons possibles. Cela relève davantage du métier d’intégrateur ou de développeur web. Votre rôle consiste plutôt à concevoir des interfaces intuitives et esthétiques, tout en collaborant efficacement avec des experts techniques.

Des outils existent pour vous aider à explorer les options sans avoir à tout retenir. Ces outils incluent :

Les éditeurs de code (comme Visual Studio Code) : lorsque vous commencez à taper une propriété CSS, ils affichent une liste déroulante des options possibles. Par exemple, si vous commencez à écrire text-, l’éditeur vous proposera automatiquement des suggestions comme text-align, text-transform, etc.
Les inspecteurs des navigateurs (comme Chrome ou Firefox) : ces outils permettent d’expérimenter directement avec les styles en affichant également des listes déroulantes pour choisir les propriétés ou valeurs, comme les familles de polices, les couleurs ou les unités de mesure.

Conclusion pédagogique

Le but de ces chapitres ne sont pas de vous transformer en intégrateur web, mais de vous donner les bases pour comprendre et manipuler le CSS.

Vous n’avez pas besoin de tout mémoriser : apprenez à utiliser ces outils pour explorer et appliquer les bonnes propriétés de manière intuitive.

Votre force, en tant que designer, réside dans la conception et la communication efficace avec les développeurs, pas dans l’exhaustivité technique.

Pour votre information, dans les chapitres suivants, nous allons découvrir de nouveaux outils d’édition, comme Visual Studio Code et la console des navigateurs (ex. Google Chrome).