ordonnancement des déclarations

Version imprimable

13/11/2008, 10h13
pop_up

ordonnancement des déclarations
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:

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:

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.

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:

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:

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:

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:

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.

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:

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; }
est ce une bonne méthode à ton avis ?

encore merci

PS: Si tu connais des liens vers de bons articles sur le sujet, je suis preneur ;)

15/11/2008, 00h01
devyan

Citation:

Envoyé par pop_up

PS: Si tu connais des liens vers de bons articles sur le sujet, je suis preneur ;)

A ce sujet il y a le W3C (en anglais) ou alors ce sujet en haut de ce forum ;)