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

[dorian53]

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

[MarvinLeRouge]

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.

[Marie-Aude]

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

[dorian53]

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.

[Marie-Aude]

ou alors ils ont des regles de nommage, et c'est clair pour eux

[Leonick]

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

[HawkEye]

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 {}

[spout]

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

[dorian53]

Merci pour vos réponses, je vais continuer à faire un mixte de tout ça.