18041 sujets

Questions générales et questions de débutants

[Résolu] Comment bien nommer ses div

bonjour à tous

J'ai fais plusieurs recherche sur le web et j'ai déjà trouvé quelques éléments de réponse à ma question mais pas totalement.

Existe-t-il une nomenclature pour bien nommer ses div pour qu'elle puisse etre compréhensible de tous et être utiliser a différent endroit d'un site?

par ex:

<div id="header">, <div id="footer"> sont compréhensible de tous
<div id="sidebar"> peut être aussi bien placer à gauche que à droite
etc....

Merci d'avance
Bonjour Ludolegends.

Aucune règle commune à tous n'existe sur le nommage des boîtes.
Mais comme tu l'indiques, on reprend souvent les mots clefs qui sont compris par tout le monde.
--> main : boîte principale et unique au même niveau que header et footer dans le body.
--> menu pour un menu.

Ce que je fais très souvent, c'est nommer une boite que si je ne peux pas faire autrement.
Par exemple, si je suis en html5 et que j'ai un seul menu, j'utilise la balise <nav> et nul besoin de faire référence avec un id ou un class.

De même, si j'ai deux menus mais à deux endroits bien distincts de mon html, nul besoin de les nommer.
Exemple : body --> header --> nav : menu horizontale et body --> aside --> nav : menu verticale.
En css, je déclare alors :
header nav { background-color : red; }
aside nav { background-color : green; }
J'essaye surtout de ne pas trop surcharger le code html avec des id et des class qui rendent celui-ci totalement illisible.
Inversement, dans le cadre du JavaScript, c'est presque obligatoire pour accéder directement à ta balise.
Et en css, il est plus simple de mettre un id ou une class que de répéter bêtement les mêmes propriétés sur chaque balise.

@+
Modifié par tournikoti (30 Oct 2013 - 11:00)
ok merci

main et menu je connaissais ici mais si je prend un exemple un peu plus concret

dans mon main j'ai par exemple un article que je place dans une div pour régler la mise en forme en CSS
<div class="article">

un peu plus loin dans la création de mon site je m'aperçois que j'aurais pu utiliser cette même mise en forme pour mettre un contenu totalement différent... par exemple une description de produit.

ce que je fait actuellement:

 
<div class="article"> </div>
<div class="description_produit"> </div>




.article, .description_produit 
{
  width: 250px;
  height: 250px;
}


alors que si j'avais un nom plus générique dès le départ je n'aurais pas été obligé de mettre 2 noms de classes différentes pour les même propriété CSS.

comme en fouinant un peu sur le net et en regardant les codes sources j'ai vu qu'il y avait souvent les même nom qui revenait je me suis dit qu'il y avait peut être un genre de nomenclature.

Est-ce la bonne méthode que j'utilise?

Merci d'avance
Soit en html :
<div class="article"> </div>
<div class="description_produit"> </div>
Et prenons l'exemple CSS suivant :
.article {
width: 250px;
height: 250px;
}

.description_produit {
width : 250px;
height : 250px;
background-color : red;
}
Les deux descriptions sont bonnes mais tu fais de la redondance de propriétés. Je mettrais plutôt :
<div class="article"> </div>
<div class="article description_produit"> </div>
Et en CSS
.article {
width: 250px;
height: 250px;
}

.description_produit {
background-color : red;
}
Tu peux aussi combiner les id et les class dans le html.
<div id="description_produit" class="article">bla bla</div>
Article est générale à tout le document HTML, tandis que description produit sera uniquement appliqué à cette boîte.

Personnellement, je préfère mettre les balises en cascade dans le css.
div#main article section div {background-color : red;}
@+
Modifié par tournikoti (30 Oct 2013 - 12:32)
Hello,

Raphaël a posté un article sur le sujet il n'y a pas longtemps sur son blog : http://blog.goetter.fr/post/63453290196/comment-je-nomme-mes-elements-html

J'évite déjà d'utiliser les sélecteurs de balises directement pour des question de performances.

Pareil, pour des raisons de lisibilité ou de confort, on peut choisir de suivre l'exemple de tournikoti et faire apparaître la cascade des éléments HTML dans le CSS (c'est par exemple ce que je demandais à mes étudiants quand j'enseignais, pour qu'ils comprennent bien la notion d'imbrication des balises), mais ce n'est pas très optimisé : mieux vaudrait a priori remplacer son div#main article section div par un .section-wrapper ou autre. C'est plus performant, et surtout ça permet d'attribuer un nom de classe réutilisable et a peu près sémantique, c'est-à-dire adapté à sa fonction. C'est bien là l'essentiel pour moi.

Ensuite, tu as la méthode utilisée par les grilles et par la plupart des framework CSS avec leurs conventions de nommage de classes spécifique… elles poussent le bouchon encore plus loin avec des classes pour les marges, etc. Parfois, c'est même un peu trop loin Smiley lol A voir suivant tes préférences et celles de ceux qui travaillent avec toi.

De mon côté je préfère travailler avec des compromis. J'utilise des identifiants pour les grands éléments récurrents mais ceux-ci ne sont pas ciblés en CSS, je ne les utilise que pour faire des ancres, etc. Ils sont doublés de classes précises pour chacun et idéalement suffisamment compréhensibles et généralisables pour que ma *collègue* ne m'envoie pas bouler en lisant mon code !
Bonjour.

Existe-t-il une nomenclature pour bien nommer ses div pour qu'elle puisse etre compréhensible de tous et être utiliser a différent endroit d'un site?

Si tu utilises le HTML5, tu n'auras plus besoin de nommer des divs.
Sujet clos
Aller à