Gestion des priorités dans l'application d'une classe

bonjour
j'ai une css avec des classes dont une permet d'appliquer notamment une couleur de fond par defaut dans un rond.
la couleur par défaut est gris.

.baloon {
  display: inline-block;
  background-color: #333;
  height: 44px;
  width: 44px;
  border-radius: 22px;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  line-height: 44px;
  margin: 10px 8px 10px 0;
 }

Mais parfois, j'ai besoin d'appliquer une couleur spécifique via mon code PHP, du genre :

.fond_vert {
	background-color:#003300;
}

du coup mon code HTML est soit :

<div class="baloon"></div>

soit

<div class="baloon fond_vert"></div>

Ainsi je peux donc controler (en théorie) la couleur que j'applique via mon PHP...

Mais la couleur de fond verte n'arrive pas à supplanter la couleur par défaut grise... et je ne comprends pas pourquoi ?

Quelqu'un pourrait m'aider à comprendre le fonctionnement dans ce cas ?

merci de votre aide

bonjour, il faut que tu définisse tes classes dans cet ordre:

1 - La principale, ici fond gris
2 - Puis la secondaire, ici fond vert.

Sinon dans fond vert, tu note comme cela:

.fond_vert {
	background-color:#003300 !Important;
}

Cela forcera le changement de couleur.

Ce que dit dann est juste. Toutefois je te déconseille le !important. Cet ajout casse toute le logique du poids des sélecteurs en donnant une priorité absolue à la déclaration contenant le !important. Sur le moment cela te rend service, car tu obtiens ce que tu veux facilement, mais si un jour tu as besoin de surcharger cette classe fond_vert, tu seras foutu… Privilégie donc la première solution.
Modifié par Derwoed (26 Sep 2015 - 00:12)

Ou en mettant un selecteur plus fort

.baloon.fond_vert {
	background-color:#003300;
}

La solution la plus propre consiste en effet à définir un ordre précis dans les feuilles de styles :

.class1 {background:red;}
.class2 {background:blue;}

Si les deux classes sont appelées sur le même élément HTML, .class2 surchargera .class1 et ton élément aura un fond gris, remplacé par un fond bleu. Parce que .class2 est situé APRES .class1 dans la CSS.

Une bonne pratique consiste aussi à ne pas employer de classes définissant directement ses propriétés. Imagine si demain tu souhaites que ton .fond_vert ajoute une bordure, puis un ombrage. Et puis plus tard pourquoi pas, le design change, et tu n'as plus de vert sur ton site. Tu vas te retrouver obligé de changer le nom des classes partout. Autant éviter de se tirer une balle dans le pied dès le début !

Vise plutôt un type de nommage plus générique :

<div class="baloon baloon1"></div>

Ou

<div class="baloon1"></div>

(avec le sélecteur CSS "commence par...")

Ou bien à la rigueur, si tu es sur à 100% que tu ne vas embarquer qu'une couleur de fond :

<div class="baloon color1"></div>

Modifié par Nigel (29 Sep 2015 - 10:37)