Quelle est la convention de nommage standard pour les ID et les classes html/css?

Il existe un guide de style CSS&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 (-), depuis ...

<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 à la valeur par id facilement dans comme ça. Mais si vous utilisez un trait d'Union, cela provoquera une erreur de syntaxe.

C'est un vieux modèle, mais il peut fonctionner sans jquery:)

Il n'y a pas de convention de nommage 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 Propriété

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

Voiture-nouvelle-tourner à droite

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

Voiture - un nom et un objet
new-un adjectif et un descripteur d'objet qui décrit l'objet plus en détail
devenu un verbe, et une action qui appartient à l'objet
droit - un adjectif, et un descripteur qui décrit l'action plus en détail

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

La Relation

Les objets peuvent également avoir 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-nouvelle-tourné-right_wheel-gauche-tourner à gauche

• voiture-nouvelle-tourner à droite (suit la règle de propriété)
• roue gauche-tourner à gauche (suit la règle de propriété)
• voiture-nouvelle-tourné-right_wheel-gauche-tourner à gauche (suivre le lien article)

Notes Finales:

• parce que CSS est insensible à la casse, il est préférable d'écrire tous les noms en minuscules( ou majuscules); évitez camel-case ou pascal-case car ils peuvent conduire à des noms ambigus.
• Savoir quand utiliser une classe et quand utiliser un id. Il ne s'agit pas seulement d'un identifiant utilisé une fois sur la page web. La plupart du temps, vous voulez utiliser une classe et non un id. Composants Web comme (boutons, formulaires, panneaux,...etc) devrait toujours utiliser une classe. Les Id peuvent facilement conduire à des conflits de noms et doivent être utilisés avec parcimonie pour l'espace de noms de votre balisage. Les concepts ci-dessus de propriété et de relation s'appliquent à nommer les classes et les ID, et vous aideront à éviter les conflits de nommage.
• Si vous n'aimez pas ma convention de nommage CSS, Il y en a plusieurs autres: Convention de nommage structurelle, Convention de nommage de présentation, Convention de nommage sémantique, convention de nommage bem, convention de nommage OCSS, etc.

Juste une autre norme alternative à considérer:

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

Et dans votre script:

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

Cela utilise simplement un camelCase, under_score et un trait d'Union respectivement pour les variables, les ID et les classes. J'ai lu à propos de cette norme sur deux sites différents. Bien qu'un peu redondant dans les sélecteurs css / jquery, les redondances facilitent la détection des erreurs. par exemple: si vous voyez .unknown_name ou #unknownName dans votre fichier CSS, vous savez que vous devez comprendre ce que cela fait réellement référence de.

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

Utilisation de raccourcis clavier comme option + gauche/Droit (ou ctrl+gauche/right sous 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 en utilisant des 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 si tout était 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.) à partir de langages de programmation comme Java, JavaScript (cas camel). Et je suis d'accord avec vous que l'utilisation d'identifiants autorisés dans les langages de programmation semble meilleure.

Edit: peut-être sans rapport, Mais voici un lien pour les règles et les recommandations sur le nommage des éléments XML que je suis lors du nommage des ID (sections "Règles de nommage XML" et " meilleur nommage Pratique").

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