Le livre de Yacs Créer une identité visuelle

PreviousNextIndex

Identifiants et classes css - quelques bases

Cet article est une suite de notes, à éventuellement mettre en forme, compléter ou ré-utiliser ailleurs.
YACS génère des balises HTML en indiquant soit des identifiants CSS, soit des classes CSS.

Par exemple, la boîte à droite de cette page qui liste les sous-sections est une liste de définition de classe extra_box. Autrement dit, une balise dl class="extra_box".

Et la règle correspondante dans le fichier CSS est celle qui commence par .extra_box. En effet, en CSS, les classes sont repérées par le caractère point initial.
De la même façon, la boîte de gauche qui contient votre menu utilisateur, avec votre nom, est une liste de définition de classe navigation_box et en plus, elle a l'identifiant user_menu. YACS met tout ça dans une balise dl id="user_menu" class="navigation_box".

Dans le fichier de style, la règle de classe est repérée par .navigation_box, et la règle qui s'applique à l'identifiant par #user_menu.
Notez le '#' au lieu du '.', pour les règles sur des objets identifiés nommément.

Plus compliqué : que se passe-t-il si je définis des choses contradictoires dans les deux règles mentionnées dans l'exemple ci-dessus ? Une police de 11 pixels d'un côté, de 14 pixels de l'autre. Comment fait le navigateur ?
La règle définie par le standard CSS, c'est que la règle associée à l'identifiant a priorité sur la règle de classe. Avec CSS, '#' gagne toujours sur '.', c'est comme ça.

Ceci peut expliquer des fois des comportements bizarres, ou, au contraire, permettre d'affiner des règles standards de classe.

Par exemple, ici, le même design CSS s'applique pour toutes les boîtes de navigation à gauche. Mais on pourrait créer une nouvelle règle juste pour personnaliser le menu utilisateur, si besoin.

En fait, une règle de style accumule des points pour des classes (.) et encore plus de points pour des id (#). La règle qui a le plus de points l'emporte.

Ainsi, une façon de forcer l'application d'une règle sur d'autres qui pourraient s'appliquer est de lui "donner des points" en rajoutant des items au sélecteur.

Ainsi, si votre nouvelle règle pour a.button ne prend pas le dessus transformez-la en #main-panel a. button et si ce n'est pas suffisant, faites #wrapper #main-panel a. button.

PreviousNextIndex