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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par dorian53, 17 Mars 2011.

  1. dorian53
    dorian53 WRInaute passionné
    Inscrit:
    10 Avril 2005
    Messages:
    1 909
    J'aime reçus:
    1
    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
     
    #1 dorian53, 17 Mars 2011
  2. MarvinLeRouge
    MarvinLeRouge WRInaute impliqué
    Inscrit:
    1 Septembre 2004
    Messages:
    515
    J'aime reçus:
    0
    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.
     
    #2 MarvinLeRouge, 18 Mars 2011
  3. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 361
    J'aime reçus:
    2
    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
     
    #3 Marie-Aude, 18 Mars 2011
  4. dorian53
    dorian53 WRInaute passionné
    Inscrit:
    10 Avril 2005
    Messages:
    1 909
    J'aime reçus:
    1
    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.
     
    #4 dorian53, 18 Mars 2011
  5. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 361
    J'aime reçus:
    2
    ou alors ils ont des regles de nommage, et c'est clair pour eux
     
    #5 Marie-Aude, 18 Mars 2011
  6. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 417
    J'aime reçus:
    0
    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
     
    #6 Leonick, 18 Mars 2011
  7. HawkEye
    HawkEye WRInaute accro
    Inscrit:
    23 Février 2004
    Messages:
    13 932
    J'aime reçus:
    5
    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 {}

    ;)
     
    #7 HawkEye, 19 Mars 2011
  8. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 126
    J'aime reçus:
    318
    La technique de WP est pas mal je trouve: une class sur le body en fonction du template (archives / single / home / ...).
     
    #8 spout, 19 Mars 2011
  9. dorian53
    dorian53 WRInaute passionné
    Inscrit:
    10 Avril 2005
    Messages:
    1 909
    J'aime reçus:
    1
    Merci pour vos réponses, je vais continuer à faire un mixte de tout ça.
     
    #9 dorian53, 21 Mars 2011
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
Similar Threads - [HTML CSS] Conflit Forum Date
[HTML/CSS] Problème DIV Développement d'un site Web ou d'une appli mobile 21 Juillet 2011
[HTML5] Attribut HIDDEN, qui a testé ? Des retours ? Débuter en référencement 7 Novembre 2011
[HTML/JS] Enable/Disable un groupe de radios Développement d'un site Web ou d'une appli mobile 23 Octobre 2010
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
[Cheat css] Est-ce que Magento triche ? Débuter en référencement 3 Mai 2012
[CSS] Aligner une image à coté d'une div en display:table-cell ? Développement d'un site Web ou d'une appli mobile 2 Mai 2012
[CSS] Alignement vertical du texte Développement d'un site Web ou d'une appli mobile 20 Avril 2011
[css] Petit souci pour le menu du jour! Développement d'un site Web ou d'une appli mobile 29 Août 2010
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010