[HTML/CSS] Conflit de noms : ids et classes uniques

WRInaute passionné
Bonjour,

Aujourd'hui pour optimiser la vitesse de nos sites, nous fusionnons tous les fichiers de même type : CSS, JS, images, etc...

Question
Sur un site de plusieurs dizaines (centaines de pages), comment définissez-vous le nom des ids et classes de vos éléments HTML ? Avez-vous une convention pour qu'ils soient uniques ?

Problème
Si sur une page A je nomme un élément avec un id à "title" et que sur une page Z bien au fond de l'arborescence je redéfinis un élément "title" avec une mise en forme différente. Avec cette nouvelle définition, je vais surcharger mon 1er id "title" dans mon CSS et l'affichage de A sera perturbé par la mise en forme de Z. Même problématique si l'on imaginait la gestion d'évènements JavaScript liés aux ids ou classes d'éléments.

Proposition
Une solution toute simple consisterait à préfixer chaque id et classes par le path de page : news_sport_foot_title
Le problème est que cela donne des noms bien trop longs, pénibles à exploiter et surcharge le poids des fichiers.

Qu'en pensez-vous ?

Merci
Dorian
 
WRInaute impliqué
Salut,

Si le nom #title est cohérent sur les 2 pages, alors tu peux éventuellement coller un id à chaque page, sur le body, et faire une règle du genre #title quand tu la définis (puisque c'est alors un comportement par défaut et que tu ignores potentiellement s'il y aura différents cas), et #pageZ #title quand tu définis une variante.
Après tout, d'un point de vue langage, un id doit être unique par page, puisque c'est la seule unité de contexte de base.
 
WRInaute accro
Tu peux aussi faire des fichiers css supplémentaires spécifiques à certaines pages, et ne le charger dans ton exemple que sur la page z
 
WRInaute passionné
Je dois être le seul à me poser ce genre de question en fait :)

Mettre un id au body avec le nom de la page, oui j'aime bien c'est également ce que je fais.
Par contre la règle devient plus lourd mais l'id de la page permet bien de gérer "un préfixe" et d'atteindre uniquement l'élément concerné.

Un fichier par page et règles spécifiques, je faisais ça au début mais pour optimiser je ne veux plus appeler plusieurs fichiers.

Comment font les gros sites pour avoir des ids et noms de classes "short" incompréhensibles :
- az47
- gKl247
- ee_o8

Il utilise des outils qui compactent ?

J'imagine qu'au final chacun à sa propre organisation.
 
WRInaute accro
dorian53 a dit:
Un fichier par page et règles spécifiques, je faisais ça au début mais pour optimiser je ne veux plus appeler plusieurs fichiers.
non, en fait ce qui est plus pratique, c'est d'avoir un "gros" fichier css, avec toutes les règles communes à l'ensemble du site, puis, un 2) fichier css avec des règles spécifiques à certaines pages ou répertoires. En plus, ce fichier étant appelé après le 1°, on peut en profiter pour surcharger les règles définies dans le fichier commun.
le spécifique doit être très léger, histoire de garder une harmonie générale dans la présentation du site
 
WRInaute accro
Pour rappel, le C de CSS c'est pour "Cascaded": tu dois travailler avec une forme d'héritage et de dépendance.

Tu peux avoir différents éléments dont l'ID est "title", mais utilisés différemment, par exemple:

#title {} // trop global

h1#title {}
p#title {}
div#title {}

et je te passe les

div#top ul#foo li.bar h1 {}

;)
 
WRInaute accro
La technique de WP est pas mal je trouve: une class sur le body en fonction du template (archives / single / home / ...).
 
Discussions similaires
Haut