Hello les petits chatons ! Aujourd’hui, on va apprendre à maîtriser les class CSS pour écrire un code propre et efficace !

Les bases d'une class CSS

Comme vous le savez, le CSS sert à styler la structure HTML. Une class (ou classe, en bon français, les deux orthographes fonctionnent) sert à identifier un élément HTML pour lui donner un style particulier.

Je ne vais pas m'attarder sur la structure d'une déclaration CSS, simplement vous dire qu'on identifie une class avec un point (.) suivi du nom de la class. Son nom peut contenir des lettres (majuscules ou minuscules), des chiffres, des tirets (-) ou des underscores (_). On évite les accents dans le nom d'une class, tout comme les ponctuations comme les points, les virgules, etc.

Dans le HTML, on ajoute un class= suivi du nom de la class entre guillemets.

Code:

.maClass {propriété: valeur;}
<p class="maClass"></p>

L'intérêt d'une class est d'identifier un élément alors soyez logiques en les nommant. Donc, quelques petits conseils :

• Nommez votre class par l'élément qu'elle désigne (ex: .footer-logo)


• Restez lisibles. Le camelCase peut parfois gêner la lecture (ex: .jeSuisUneClassEnCamelCase VS .je-suis-une-class-en-camel-case)


• Si le visuel est important, concentrez vous sur ça. Par exemple, une class colorant les paragraphe en rouge pourra être nommée .rouge plutôt que .content-txt


• Utilisez des préfixes (ex: .header-title, .header-txt, .header-img...)


• Essayez de placer votre class le plus en bas de votre arborescence. (ex: Au lieu d'écrire .content div, donnez une class à votre div)


• Ne donnez pas à votre class le nom d'un élément HTML : pas de .p ou de .li, vous risquez juste de causer de la confusion.

Évidemment, vous êtes libres de faire comme bon vous semble du moment que votre class respecte les conventions de base (pas de caractère spécial hormis les tirets et les underscores). Sachez juste que des class claires et précises seront plus faciles à identifier pour une personne qui lira votre code.

Les class multiples

Il est possible de donner plusieurs class à un même élément. Pour cela, dans le HTML on ajoute un espace après la première class et on écrit le nom de la seconde class. Il est possible d'ajouter autant de class que désiré, même si au bout de cinq ou six class, il est temps de se poser des questions sur la logique de son code...

Code:

<div class="class-1 class-2 class-3">Exemple</div>

Attention, dans le CSS, pour sélectionner cet élément, on ne mettra pas d'espace (sinon, cela voudrait dire qu'on identifierait ses enfants !). Ainsi, pour sélectionner cette div, on écrira :

Code:

.class-1.class-2.class-3 { ... }

Ce qui équivaut à cibler un élément ayant la class class-1 ET class-2 ET class-3. À ne pas confondre avec :

Code:

.class-1 .class-2 .class-3 { ... }

Ce qui équivaut à cibler un élément ayant la class-3 ENFANT d'un élément ayant la class-2 ENFANT d'un élément ayant la class-1. Soyez donc attentifs lorsque vous écrivez votre CSS !

L'intérêt des class multiples

L'intérêt des class multiples est d'ajouter des effets à un élément sans avoir à lui recréer tout un nouveau style. Par exemple :

Code:

.bloc {
    border-style:solid;
    border-width: 1px;
    border-color: red;
    display: inline-block;
    height: 50px;
    width: 50px;
 }

.bleu {
     border-color: blue;
}

<div class="bloc"></div>
<div class="bloc bleu"></div>


Donnera :

   

Comme vous pouvez le voir, les deux blocs ont la class .bloc, mais le deuxième a en plus la class .bleu. Le deuxième bloc a adopté les propriétés de la class .bloc ET de la class .bleu. C'est quelque chose d'important à retenir : Les propriétés des class ajoutées écrasent les propriétés des class précédentes si elles sont communes (ici, c'est border-color). Mais attention, prêtez attention à l'ordre de vos class dans votre CSS.

En effet, l'ordre des class attribuées à votre élément n'a aucune importance : c'est l'ordre dans votre ficher CSS qui prime. Ainsi, si on écrit :

Code:

.myClass1 {color:red;}
.myClass2 {color:green;}
<div class="myClass2 myClass1">Mon texte</div>

On aurait tendance à penser que myClass1, puisque l'attribut de class vient en dernier, prend l'ascendant sur myClass2. Mais regardez bien dans les propriétés CSS l'ordre dans lequel viennent les propriétés... Et voilà le résultat :



myClass2 vient après myClass1 dans le CSS : myClass2 surcharge myClass1. Changer l'ordre des class dans la div n'a aucune incidence.

Je le disais plus haut, mais cibler une class ou plusieurs dans le CSS rend des résultats différents. Ainsi, .myClass1.myClass2 est différent de .myClass2.

.myClass2 va cibler tous les éléments ayant la class myClass2.

.myClass1.myClass2 va cibler tous les éléments ayant la class myClass1 ET myClass2.

Un exemple concret est le suivant :

Code:

.myClass1 {color:red;}
.myClass2 {color:green;}
.myClass1.myClass2 {color:blue;}

<div class="myClass2">Mon texte</div>
<div class="myClass2 myClass1">Mon autre texte</div>

Et le résultat :


La première div n'a pas la class myClass1 alors la propriété de .myClass1.myClass2 n'a pas d'incidence sur elle. L'ordre ici non plus n'a pas d'importance. .myClass1.myClass2 revient au même que .myClass2.myClass1 . C'est toujours l'ordre des propriétés CSS qui prime.

Un peu compliqué, toutes ces class ? On résume !

• Un élément HTML peut avoir plusieurs class. L'ordre des class dans ses attributs n'a aucune importance.


• L'ordre des propriétés dans le CSS est ce qui compte.


• On peut cibler, dans le CSS, un élément ayant une class (par exemple .bleu) ou en ayant plusieurs (par exemple .bleu.rouge).


• L'intérêt de multiplier des class est de surcharger un style sans avoir à le répéter.

Le risque des class multiples

Multiplier les class est un risque de se perdre un peu dans son code : la structure HTML, allongée par la multiplication des class, peut devenir un peu plus dure à lire. Un des risques principaux est d'écraser involontairement le style d'un élément. Comme je le disais précédemment, c'est l'ordre du fichier CSS qui prime. En changeant l'ordre du CSS, il est possible de tout casser, c'est donc important d'organiser sa feuille de style avec logique.

Code:

p {
font-size: 12px;
color: blue;
}

.underlined {
text-decoration: underline;
}

.rouge {
 color: red;
}
   
<p>Je suis un paragraphe normal</p>
<p class="underlined">Je suis un paragraphe souligné</p>
<p class="underlined rouge">Je suis un paragraphe souligné et rouge</p>

Je suis un paragraphe normal

Je suis un paragraphe souligné

Je suis un paragraphe souligné et rouge

Comme on l'a vu précédemment, les propriétés s'ajoutent ou s'écrasent. Mais si on change l'ordre du CSS, que se passe-t-il ?

Code:

.rouge {
 color: red;
}

p {
font-size: 12px;
color: blue;
}

.underlined {
text-decoration: underline;
}

<p>Je suis un paragraphe normal</p>
<p class="underlined">Je suis un paragraphe souligné</p>
<p class="underlined rouge">Je suis un paragraphe souligné et rouge</p>

Je suis un paragraphe normal

Je suis un paragraphe souligné

Je suis un paragraphe souligné et rouge

Le .rouge est placé avant p dans le CSS. Résultats, la syntaxe fait son travail, le navigateur interprète le code et la dernière propriété prévaut : le paragraphe reste bleu. C'est pour cette raison qu'on doit rédiger son CSS avec logique et organisation. Réfléchissez bien à vos styles "custom" et rangez votre code !

Quand utiliser les class multiples ?

Les class multiples sont là pour vous faciliter la vie. Comme dit précédemment, elles servent à styler un élément tout en évitant de devoir créer un nouveau style. On s'en sert donc généralement on veut donner un style plus spécifique à un élément déjà stylé. Ça peut aussi être utile pour composer des styles. On peut par exemple faire flotter un élément, en créant une class .left et une class .right, avec les propriétés float: left et float: right. Ainsi, il n'y a plus qu'à attribuer les class left ou right à n'importe lequel de vos éléments, sans avoir à réécrire la propriété dans votre CSS ! Ou, dans le même principe, créer une class .gras à appliquer à n'importe lequel de vos paragraphes que vous souhaitez voir apparaître en gras. Vous pouvez de cette manière ajouter de multiples class à vos éléments HTML et les mixer pour créer vos styles.

Bien utilisées, les class multiples peuvent vraiment vous faciliter la vie et alléger votre code. Répéter les mêmes styles pour deux éléments qui ont peu de différences peut vraiment allonger votre CSS. Avec les class multiples, il suffit de créer une nouvelle class et d'y ajouter ses customs.

Par exemple, au lieu d'écrire :

Code:

.rond {
    background: red;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    border: 2px solid: #ccc;
    margin: 5px;
    display: inline-block;
 }

.rond-jaune {
    background: yellow;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin: 5px;
    display: inline-block;
}

<div class="rond"></div>
<div class="rond-jaune"></div>

On écrira :

Code:

.rond {
    background: red;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin: 5px;
    display: inline-block;
 }

.rond-jaune {
    background: yellow;
}

<div class="rond"></div>
<div class="rond rond-jaune"></div>

Ce qui, dans tous les cas, donnera le même résultat :



Voilà, c'est terminé ! Vous avez maintenant les clés en mains pour dompter vos class avec brio et vous faciliter la vie en codant !