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 suggérée/suivie par la plupart des développeurs?
Il y a plusieurs options:
id="someIdentifier"'- semble assez cohérent avec le code javascript.id="some-identifier"- ressemble davantage à des attributs de type HTML5 et à d'autres éléments HTML.id="some_identifier"- semble assez cohérent avec le code Ruby et est toujours un identifiant valide à l'intérieur de Javascript
Je pensais que les n ° 1 et n ° 3 ci-dessus avaient le plus de sens car ils jouaient mieux avec Javascript.
Y a-t-il une bonne réponse à cela?
Il n'y en a pas.
J'utilise tout le temps les traits de soulignement, à cause des traits d'union qui gênent 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 joli/le plus facile à lire pour vous, ainsi que le plus facile à taper car vous l'utiliserez beaucoup. Par exemple, si votre touche de soulignement est sous le clavier (peu probable, mais tout à fait possible), respectez les traits d'union. Il suffit d'aller avec ce qui est le mieux pour vous-même. 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 la casse de chameau (thisIsASelector) à la place des traits d'union; Je trouve ce dernier plutôt moche. Utilisez ce que vous préférez, ce qui peut facilement changer avec le temps.
Mise à jour 2013
On dirait que j'aime bien mélanger les choses chaque année ... Après être passé à Sublime Text et utiliser Bootstrap pendant un moment, je suis revenu aux tirets. Pour moi, ils ont l'air beaucoup plus propres que l'un_der_scores ou camelCase. Mon point de départ est toujours valable: là n'est pas un standard.
Mise à jour 2015
Un cas intéressant avec conventions ici est Rust . J'aime beaucoup le langage, mais le compilateur vous préviendra si vous définissez des éléments en utilisant autre chose que underscore_case. Vous pouvez désactiver l'avertissement, mais il est intéressant que le compilateur suggère fortement une convention par défaut. J'imagine que dans les grands projets, 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 possibilité de réutilisation aux classes et aux CSS qui vont avec. Je suppose que BEM est en fait un standard (donc mon no devient un yes peut-être) mais c'est toujours à vous de choisir ce que vous décidez d'utiliser dans un projet . Le plus important: soyez cohérent avec ce que vous choisissez.
Mise à jour 2019 ( vous l'avez demandé)
Après avoir écrit pas de CSS pendant un certain temps, j'ai commencé à travailler à un endroit qui utilise OOCSS dans l'un de leurs produits. Personnellement, je trouve assez désagréable de créer des classes partout, mais ne pas avoir à basculer constamment entre HTML et CSS me semble assez productif.
Je suis toujours réglé sur BEM, cependant. C'est verbeux, mais le namespacing rend le travail dans React composants très naturel. Il est également idéal pour sélectionner des éléments spécifiques lors des tests de navigateur.
OOCSS et BEM ne sont que quelques-unes des normes CSS existantes. Choisissez-en un qui fonctionne pour vous - ils sont tous remplis de compromis parce que CSS n'est tout simplement pas si bon .
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 (-), 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 à la valeur par id facilement dans comme ça. Mais si vous utilisez un trait d'union, cela provoquera une erreur de syntaxe.
Ceci est un ancien échantillon, mais cela peut fonctionner sans jquery - :)
grâce à @jean_ralphio, il existe un moyen de contourner le problème
var x = document.myForm['my-Id'].value;
Dash-style serait un style de code Google, mais je ne l'aime pas vraiment. Je préférerais TitleCase pour id et camelCase pour la classe.
Il n’existe pas de convention de dénomination convenue pour HTML et CSS. Mais vous pouvez structurer votre nomenclature autour de la conception d'objet. Plus précisément ce que j'appelle la propriété et la relation.
propriété
Les mots-clés décrivant l'objet peuvent être séparés par des traits d'union.
voiture neuve tournée à droite
Les mots-clés qui décrivent l'objet peuvent également être classés en quatre catégories (qui doivent être ordonnées de gauche à droite): objet, descripteur d'objet, action et descripteur d'action.
voiture - un nom et un objet
new - un adjectif et un descripteur d'objet décrivant l'objet plus en détail
tourné - un verbe et une action qui appartient à l'objet
right - 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és, faits, courus, etc.).
Relation
Les objets peuvent également avoir des relations comme parent et enfant. Les actions et descripteurs 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.
car-neuf-tourné-droit-roue-gauche-tourné-gauche
- car-new-turn-right (suit la règle de la propriété)
- wheel-left-turn-left (suit la règle de propriété)
- car-new-turn-right-right_wheel-left-turn-left (suit la règle de relation)
Notes finales:
- Parce que CSS est insensible à la casse, il est préférable d'écrire tous les noms en minuscule (ou en majuscule); évitez les cas de chameaux ou de casse car ils peuvent donner des noms ambigus.
- Savoir quand utiliser une classe et quand utiliser un identifiant. Il ne s'agit pas simplement 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 tels que (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 les noms. Les concepts ci-dessus de propriété et de relation s'appliquent à la dénomination de classes et d'identificateurs et vous aideront à éviter les conflits de dénomination.
- Si vous n'aimez pas ma convention de nommage CSS, il en existe plusieurs autres: convention de nommage structurel, convention de nommage de présentation, convention de nommage sémantique, convention de nommage BEM, convention de nommage OCSS, etc.
Juste un autre standard alternatif à considérer:
<div id="id_name" class="class-name"></div>
Et dans votre script:
var variableName = $("#id_name .class-name");
Cela utilise uniquement camelCase, under_score et hyphen-ation, respectivement, pour les variables, les identifiants et les classes. J'ai lu des informations sur cette norme sur plusieurs sites Web. 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 déterminer à quoi cela correspond.
Une autre raison pour laquelle beaucoup préfèrent les traits d'union dans les identifiants et les noms de classes CSS est la fonctionnalité.
Utilisation de raccourcis clavier tels que option + left/right (ou ctrl+left/right sous Windows) pour parcourir le code Word par Word arrête le curseur à chaque tiret, ce qui vous permet de parcourir précisément l’id ou le nom de la classe à l’aide de raccourcis clavier. Les traits de soulignement et camelCase ne sont pas détectés et le curseur les suivra comme s'il s'agissait d'un seul mot.
J'ai récemment commencé à apprendre XML. La version soulignée me permet de séparer tout ce qui concerne XML (DOM, XSD, etc.) des langages de programmation tels que Java, JavaScript (étui camel). Et je suis d'accord avec vous pour dire que l'utilisation d'identificateurs autorisés dans les langages de programmation a meilleure apparence.
Edit: peut-être différent, mais voici un lien pour les règles et recommandations sur la dénomination des éléments XML que je suis lorsque je nomme des identifiants (sections "Règles de dénomination XML" et "Meilleures pratiques de dénomination").
Je pense que cela dépend de la plateforme. Lors du développement dans .Net MVC, j'utilise des minuscules et des tirets de style bootstrap, pour les noms de classe, mais pour les identifiants, j'utilise PascalCase.
La raison en est que mes vues sont appuyées par des modèles de vues fortement typés. Les propriétés des modèles C # sont le cas Pascal. Par souci de liaison de 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 la casse Pascal. 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é.