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

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

 

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.

 

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