Quelle est la convention de dénomination standard pour les identifiants et les classes html / css?

Cela dépend-il de la plate-forme que vous utilisez ou existe-t-il une convention commune que la plupart des développeurs suggèrent / suivent?

Il existe plusieurs options:

1. id="someIdentifier"' - semble assez cohérent avec le code javascript.
2. id="some-identifier" - ressemble plus à des attributs de type html5 et à d'autres choses en html.
3. id="some_identifier" - semble assez cohérent avec le code rubis et est toujours un identifiant valide à l'intérieur de Javascript

Je pensais que les numéros 1 et 3 ci-dessus avaient le plus de sens, car ils jouent mieux avec Javascript.

Y a-t-il une bonne réponse à cela?

Il n'y en a pas.

J'utilise des soulignements tout le temps, en raison de tirets qui gâchent la coloration syntaxique de mon éditeur de texte (Gedit), mais c'est une préférence personnelle.

J'ai vu toutes ces conventions utilisées partout. Utilisez celui que vous pensez être le meilleur - celui qui semble le plus agréable / le plus facile à lire pour vous, ainsi que le plus facile à taper car vous l'utiliserez beaucoup. Par exemple, si vous avez votre touche de soulignement sur la face inférieure du clavier (peu probable, mais tout à fait possible), respectez les tirets. Allez avec ce qui vous convient le mieux. De plus, ces 3 conventions sont facilement lisibles. Si vous travaillez en équipe, n'oubliez pas de respecter la convention spécifiée par l'équipe (le cas échéant).

Mise à jour 2012

J'ai changé la façon dont je programme au fil du temps. J'utilise maintenant camel case ( thisIsASelector) au lieu de tirets maintenant; Je trouve ce dernier plutôt moche. Utilisez ce que vous préférez, qui peut facilement changer avec le temps.

Mise à jour 2013

Il semble que j'aime mélanger les choses chaque année ... Après être passé à Sublime Text et utiliser Bootstrap pendant un certain temps, je suis revenu aux tirets. Pour moi, maintenant, ils ont l'air beaucoup plus propres que les un_der_scores ou camelCase. Mon point de vue initial est toujours valable: il n'y a pas de norme.

Mise à jour 2015

Un cas d'angle intéressant avec des conventions ici est Rust . J'aime vraiment le langage, mais le compilateur vous avertira si vous définissez des choses en utilisant autre chose que underscore_case. Vous pouvez désactiver l'avertissement, mais il est intéressant de noter que le compilateur suggère fortement une convention par défaut. J'imagine que dans des projets plus importants, cela conduit à un code plus propre, ce qui n'est pas une mauvaise chose.

Mise à jour 2016 ( vous l'avez demandé)

J'ai adopté la norme BEM pour mes projets futurs. Les noms de classe finissent par être assez verbeux, mais je pense que cela donne une bonne structure et une bonne réutilisabilité aux classes et CSS qui les accompagnent. Je suppose que BEM est en fait un standard (donc mon nodevient yespeut - être) mais c'est à vous de décider ce que vous décidez d'utiliser dans un projet. Plus important encore: soyez cohérent avec ce que vous choisissez.

Mise à jour 2019 ( vous l'avez demandé)

Après avoir écrit sans CSS pendant un bon moment, j'ai commencé à travailler dans un endroit qui utilise OOCSS dans l'un de leurs produits. Personnellement, je trouve assez désagréable de jeter des classes partout, mais ne pas avoir à basculer entre HTML et CSS tout le temps semble assez productif.

Je suis toujours décidé pour BEM. Il est verbeux, mais l'espace de noms rend son utilisation dans les composants React très naturelle. Il est également idéal pour sélectionner des éléments spécifiques lors des tests du navigateur.

OOCSS et BEM ne sont que quelques-unes des normes CSS disponibles. Choisissez celui qui fonctionne pour vous - ils sont tous pleins de compromis parce que CSS n'est tout simplement pas si bon .

Mise à jour 2020

Une mise à jour ennuyeuse cette année. J'utilise toujours BEM. Ma position n'a pas vraiment changé depuis la mise à jour 2019 pour les raisons énumérées ci-dessus. Utilisez ce qui fonctionne pour vous, qui s'adapte à la taille de votre équipe et masque autant ou aussi peu de fonctionnalités médiocres de CSS que vous le souhaitez.

Il existe un guide de style CSS et HTML de Google, qui recommande de toujours utiliser un trait d'union: https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters .

Je vous suggère d'utiliser un trait de soulignement au lieu d'un trait d'union (-), car ...

<form name="myForm">
  <input name="myInput" id="my-Id" value="myValue"/>
</form>

<script>
  var x = document.myForm.my-Id.value;
  alert(x);
</script>

vous pouvez accéder facilement à la valeur par id comme ça. Mais si vous utilisez un trait d'union, cela provoquera une erreur de syntaxe.

Ceci est un ancien échantillon, mais il peut fonctionner sans jquery - :)

grâce à @jean_ralphio, il y a du travail pour éviter par

var x = document.myForm['my-Id'].value;

Le style de tableau de bord serait un style de code Google, mais je ne l'aime pas vraiment. Je préférerais TitleCase pour id et camelCase pour classe.

tl; dr;

Il n'y a pas de vraie réponse. Vous pouvez en choisir un parmi tant d'autres, ou créer vos propres normes en fonction de ce qui a du sens, selon la personne avec laquelle vous travaillez. Et cela dépend à 100% de la plateforme.

Message d'origine

Encore une norme alternative à considérer:

<div id="id_name" class="class-name"></div>

Et dans votre script:

var variableName = $("#id_name .class-name");

Cela utilise juste un camelCase, under_score et hyphen-ation respectivement pour les variables, les identifiants et les classes. J'ai lu cette norme sur plusieurs sites Web différents. Bien qu'un peu redondantes dans les sélecteurs css / jquery, les redondances facilitent la détection des erreurs. Par exemple: si vous voyez .unknown_nameou #unknownNamedans votre fichier CSS, vous savez que vous devez comprendre à quoi cela se réfère réellement.

MISE À JOUR 2019

(Les tirets sont appelés «kebab-case», les traits de soulignement sont appelés «snake_case», puis vous avez «TitleCase», «pascalCase»)

Personnellement, je n'aime pas les tirets. J'ai initialement posté cela comme une alternative (car les règles sont simples). Cependant, les tirets rendent les raccourcis de sélection très difficiles (double-clic, ctrl/ option+ left/ rightet ctrl/ cmd+ Ddans vsCode. De plus, les noms de classe et les noms de fichiers sont le seul endroit où les tirets fonctionnent, car ils sont presque toujours entre guillemets ou en CSS, etc. Mais le raccourci s'applique toujours.

Outre les variables, les noms de classe et les identifiants, vous souhaitez également consulter les conventions de nom de fichier. Et Git Branches.

Le groupe de codage de mon bureau s'est réuni il y a un mois ou deux pour discuter de la façon dont nous allions nommer les choses. Pour les branches git, nous ne pouvions pas choisir entre 321-the_issue_description ou 321_the-issue-description. (Je voulais 321_theIssueDescription, mais mes collègues n'aimaient pas ça.)

Un exemple, pour démontrer le travail avec les normes des autres ...

Vue.js a un standard. En fait, ils ont deux normes alternatives pour plusieurs de leurs articles. Je n'aime pas leurs deux versions pour les noms de fichiers. Ils recommandent soit "/path/kebab-case.vue"ou "/path/TitleCase.Vue". Le premier est plus difficile à renommer, sauf si vous essayez spécifiquement de renommer une partie de celui-ci. Ce dernier n'est pas bon pour la compatibilité multiplateforme. Je préfère "/path/snake_case.vue". Cependant, lorsque vous travaillez avec d'autres personnes ou des projets existants, il est important de suivre la norme déjà définie. Par conséquent, je vais avec kebab-case pour les noms de fichiers dans Vue, même si je m'en plaindrai totalement. Parce que ne pas suivre cela signifie changer beaucoup de fichiers configurés par vue-cli.

Il n'y a pas de convention de dénomination convenue pour HTML et CSS. Mais vous pouvez structurer votre nomenclature autour de la conception d'objets. Plus précisément ce que j'appelle la propriété et la relation.

La possession

Les mots clés qui décrivent l'objet peuvent être séparés par des tirets.

voiture-nouveau-tourné à droite

Les mots-clés qui décrivent l'objet peuvent également appartenir à quatre catégories (qui doivent être classées de gauche à droite): Objet, Descripteur d'objet, Action et Descripteur d'action.

voiture - un nom et un objet
nouveau - un adjectif et un descripteur d'objet qui décrit l'objet plus en détail
transformé - un verbe et une action qui appartient à l'objet
droit - un adjectif et un descripteur d'action qui décrit l'action plus en détail

Remarque: les verbes (actions) doivent être au passé (tourné, fait, couru, etc.).

Relation

Les objets peuvent également avoir des relations comme parent et enfant. L'action et le descripteur d'action appartiennent à l'objet parent, ils n'appartiennent pas à l'objet enfant. Pour les relations entre les objets, vous pouvez utiliser un trait de soulignement.

voiture-nouveau-tourné-à-droite-roue-gauche-tourné-gauche

• voiture neuve à droite (suit la règle de propriété)
• roue-gauche-tourné-gauche (suit la règle de propriété)
• voiture-nouveau-tourné à droite-roue-gauche-tourné à gauche (suit la règle de relation)

Notes finales:

• Parce que CSS n'est pas sensible à la casse, il est préférable d'écrire tous les noms en minuscules (ou en majuscules); évitez les cas de chameau ou de pascal car ils peuvent conduire à des noms ambigus.
• Sachez quand utiliser une classe et quand utiliser un identifiant. Il ne s'agit pas seulement d'un identifiant utilisé une fois sur la page Web. La plupart du temps, vous souhaitez utiliser une classe et non un identifiant. Les composants Web comme (boutons, formulaires, panneaux, ... etc) doivent toujours utiliser une classe. Les identifiants peuvent facilement conduire à des conflits de noms et doivent être utilisés avec parcimonie pour l'espace de noms de votre balisage. Les concepts de propriété et de relation ci-dessus s'appliquent à la dénomination des classes et des identifiants, et vous aideront à éviter les conflits de dénomination.
• Si vous n'aimez pas ma convention de dénomination CSS, il en existe plusieurs autres: convention de dénomination structurelle, convention de dénomination présentationnelle, convention de dénomination sémantique, convention de dénomination BEM, convention de dénomination OCSS, etc.

Une autre raison pour laquelle beaucoup préfèrent les tirets dans les noms d'ID et de classe CSS est la fonctionnalité.

L'utilisation de raccourcis clavier tels que option+ left/ right(ou ctrl+ left/ rightsous Windows) pour parcourir le code mot par mot arrête le curseur à chaque tiret, vous permettant de parcourir précisément l'ID ou le nom de classe à l'aide de raccourcis clavier. Les traits de soulignement et camelCase ne sont pas détectés et le curseur dérive juste au-dessus d'eux comme s'il s'agissait d'un seul mot.

J'ai récemment commencé à apprendre XML. La version de soulignement m'aide à séparer tout ce qui concerne XML (DOM, XSD, etc.) des langages de programmation comme Java, JavaScript (cas de chameau). Et je suis d'accord avec vous que l'utilisation d'identifiants autorisés dans les langages de programmation est meilleure.

Edit: Peut-être sans rapport, mais voici un lien pour les règles et recommandations sur la dénomination des éléments XML que je respecte lors de la dénomination des identifiants (sections "Règles de dénomination XML" et "Meilleures pratiques de dénomination").

http://www.w3schools.com/xml/xml_elements.asp

Je pense que cela dépend de la plateforme. Lors du développement dans .Net MVC, j'utilise des minuscules de style bootstrap et des tirets pour les noms de classe, mais pour les identifiants, j'utilise PascalCase.

Le raisonnement en est que mes vues sont soutenues par des modèles de vue fortement typés. Les propriétés des modèles C # sont le cas pascal. Pour la liaison du modèle avec MVC, il est logique que les noms des éléments HTML qui se lient au modèle soient cohérents avec les propriétés du modèle de vue qui sont en cascal. Par souci de simplicité, mes identifiants utilisent la même convention de dénomination que les noms d'élément, à l'exception des boutons radio et des cases à cocher qui nécessitent des identifiants uniques pour chaque élément du groupe d'entrée nommé.