ordonnancement des déclarations [Fait]

**pop_up** · 13/11/2008, 10h13

Bonjour à tous,

J'aurai besoin de vos lumières sur un point précis qui est la prise en compte des déclarations suivant l'ordre dans lequel elle apparaissent. Je m'explique.

On va prendre un exemple simple. Si je fais une feuille de style pour un formulaire, et que je défini le style suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
fieldset {
  border: 1px solid green;
}

alors tous mes fieldset auront une bordure verte. Jusque la, rien de transcendant.

Mais aprés, je veux changer le style de ce fieldset quand il y a une erreur de saisie et ainsi mettre une bordure rouge. Je fais alors la classe suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.rouge {
  border: 1px solid red;
}

mais celle-ci n'est pas prise en compte ce qui est normal car une bordure est déja définie pour le fieldset. En revanche, si je veux qu'elle soit prise en compte, je peux rajouter le !important.

C'est justement sur ce point que je voudrai avoir vos lumières. Connaissez vous de bon articles qui parlent de l'utilisation de !important à bon escient ? Quelle est la bonne méthode selon vous pour faire une feuille de style qui soit la mieux structuré et qui ait du sens ?

Merci à vous.

**Bisûnûrs** · 13/11/2008, 11h36

Selon le principe de cascades, c'est la règle écrite en dernier qui est appliquée. Cela n'est vrai que lors de la comparaison de déclarations ayant un poids identique.

Des exemples seront plus parlants :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<style type="text/css">
.green {
   color : green;
}
.red {
   color : red;
}
</style>
<p class="green red">Texte en rouge</p>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<style type="text/css">
p.green {
   color : green;
}
.red {
   color : red;
}
</style>
<p class="green red">Texte en vert ; le selecteur p.green est plus précis que .red, donc il passe en priorité.</p>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<style type="text/css">
#green {
   color : green;
}
.red {
   color : red;
}
</style>
<p class="red" id="green">Texte en vert ; le selecteur #green est plus précis que .red, donc il passe en priorité.</p>

Le modificateur !important permet de passer outre les priorités :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<style type="text/css">
#green {
   color : green;
}
.red {
   color : red !important;
}
</style>
<p class="red" id="green">Texte en rouge ; le modificateur !important permet de passer outre la priorité de l'id.</p>

J'espère t'avoir éclairé un minimum.

**pop_up** · 13/11/2008, 13h04

Merci Bisûnûrs.

Effectivement, je ne connaissais pas en détail ces règles.

Du coup, dans mon cas, le !important est bien utilisé on peut dire non ?

Je ne sais pas si c'est la bonne méthode mais quand je construit ma feuille de style, je la construit normalement en définissant les styles que je veux pour chaque tag, chaque classe et chaque id mais je rajoute aussi à la fin des classe générique que je pourrai attribuer à des éléments dans des situations particulières du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
.centre {
    text-align: center !important;
}
 
.droite {
    text-align: right !important;
}
 
.gauche {
    text-align: left !important;
}
 
.rouge {
    color: red !important;
}