Qu'est-ce que la convention de nommage pour le html/css des id et des classes?

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

Il y a plusieurs options:

  1. id="someIdentifier"' - semble assez cohérente avec du code javascript.
  2. id="some-identifier" - ressemble plus à html5-à l'instar des attributs et d'autres choses dans le code html.
  3. id="some_identifier" - semble assez cohérente avec le code ruby et est encore un identificateur valide à l'intérieur de Javascript

Je pensais #1 et #3 ci-dessus ont le plus de sens parce qu'ils jouent plus agréable avec Javascript.

Est-il un droit de réponse à cela?

InformationsquelleAutor egervari | 2011-05-17
  1. 205

    Il n'en est pas une.

    - Je utiliser souligne tout le temps, en raison des traits d'union gâcher 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 dans tous les sens. Utilisez celui que vous pensez est le meilleur, celui qui ressemble le plus beau/la plus facile à lire pour vous, ainsi que plus facile à taper parce que vous allez être en utilisant un lot. Par exemple, si vous avez obtenu votre trait de soulignement clé sur le dessous du clavier (peu probable, mais tout à fait possible), puis coller à des traits d'union. Juste aller avec ce qui est le mieux pour vous. En outre, tous les 3 de ces conventions sont facilement lisibles. Si vous travaillez dans une équipe, n'oubliez pas de garder avec l'équipe spécifié convention (le cas échéant).

    Mise à jour 2012

    J'ai changé la façon dont je programme au fil du temps. Je vais maintenant utiliser chameau cas (thisIsASelector) au lieu de tirets maintenant, je trouve ce dernier assez moche. Utilisez ce que vous préférez, qui peut facilement changer au fil du temps.

    Mise à jour 2013

    Il ressemble, j'aime mélanger les choses annuel... Après le passage à Sublime Text et en utilisant Bootstrap pour un certain temps, j'ai repris des tirets. M'a l'air beaucoup plus propre que un_der_scores ou camelCase. Mon premier point tient toujours, si: il y n'est pas une norme.

    Mise à jour 2015

    Un intéressant cas de coin avec les conventions ici est La rouille. J'aime vraiment la langue, mais le compilateur vous avertira si vous définissez les choses en utilisant rien d'autre que underscore_case. Vous pouvez activer l'alerte de suite, mais il est intéressant que le compilateur suggère fortement une convention par défaut. J'imagine que dans les grands projets qu'elle mène à l'assainissement de code qui n'est pas une mauvaise chose.

    Mise à jour en 2016 (vous demandé)

    J'ai adopté la BEM standard pour mes projets d'aller de l'avant. Les noms de classe sont verbeux, mais je pense qu'il donne une bonne structure et une réutilisation, les classes et le CSS qui va avec. Je suppose que le BEM est en fait standard (donc ma no devient un yes peut-être) mais c'est toujours à vous ce que vous décidez de l'utiliser dans un projet. Le plus important: être cohérent avec ce que vous choisissez.

    • Je pense que selon ce que votre application obtenir plus de votre id commence à être long et complexe, en ce moment, les tirets ne sont pas bonnes. Je suis également en utilisant Sublime et Twitter Bootstrap, et je suis d'accord dans l'utilisation des tirets pour les classes comme le Bootstrap n'. Mais l'id est plus pour le JavaScript, donc je préfère utiliser camelCase dans ce cas.
    • Je suis à peu près marié à camelCase encore. Lors de l'écriture de Java et de Javascript toute la journée, je ne peux pas l'estomac faire des tirets ou des traits de soulignement. Il semble bizarre, et je suis plus enclin à créer des erreurs.
    • Pour moi, je préfère encore le trait de soulignement de style. Tout simplement parce que toutes les balises HTML et les attributs sont en minuscule. Je suis d'éviter toute majuscules ici.
    • En bref, stackoverflow.com/users/383609/bojangles réponse a été "oui" haha
    • Je suis en attente pour 2016 mise à jour !
    • Un quasi-standard que j'ai vu (Bootstrap semble faire partie de cette) est d'ajouter le préfixe "js-" à l'une des classes CSS ou les id qui sont spécifiquement utilisés pour le Javascript. Peut-être cela va faire la coupe pour 2016 🙂
    • Qui semble être une jolie idée judicieuse, bien que j'ai commencé à l'aide de BEM qui prend un semblable, mais approche plus générique (en utilisant les Modificateurs)
    • BEM semble intéressant, bien que l'utilisation de tirets et, souligne pour fins différentes serait prendre un certain obtention utilisé pour; de même, le double tiret/souligne aussi bien 🙂 Merci pour le partage
    • Une raison pour laquelle je crois que les gens préfèrent des tirets dans le CSS id et les classes sont pour la fonctionnalité. À l'aide de option + flèche gauche/droite pour traverser votre mot de code par la parole s'arrête à chaque tableau de bord, vous permettant de facilement parcourir l'id ou le nom de la classe à l'aide de raccourcis clavier. Les traits de soulignement et camelcase ne pas obtenir ramassé et le curseur de la dérive à droite au-dessus d'eux comme si c'étaient tous un seul mot.
    • Bon point. Je serais intéressé de savoir si BEM lignes directrices ont été inspirés par ce comportement

    InformationsquelleAutor Bojangles
  2. 37

    Il est css&html guide de style par google, qui recommande de toujours utiliser un trait d'union: https://google.github.io/styleguide/htmlcssguide.html#ID_and_Class_Name_Delimiters .

    • Et pourtant l'id dans l'url est à l'aide de traits de soulignement 🙂
    • Je pense que personne ne maintenir la règle de style pour un moment...
    InformationsquelleAutor azurkin
  3. 27

    Je vous suggère d'utiliser un trait de soulignement à la place d'un tiret (-), 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 comme ça. Mais si vous utilisez un trait d'union, il sera la cause d'une erreur de syntaxe.

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

    grâce à @jean_ralphio, il y a des travaux autour de façon à éviter par 

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

    Dash-style serait un google code style, mais je n'aime pas vraiment ça.
    Je préfère TitleCase de l'identité et de camelCase pour la classe.

    • Quelqu'un marqué ce. Votre anglais pourrait être mieux, mais en supposant que cela est correct, il semble comme un complément utile à l'corpus de connaissances ici, donc je vais voter contre le supprimer.
    • Je suis un/une ESL :S
    • Cette réponse est underated!
    • La solution de contournement être var x = document.myForm['my-Id'].value;
    InformationsquelleAutor Weijing Jay Lin
  4. 10

    Il n'y a pas accord sur la convention de nommage pour les fichiers HTML et CSS. Mais vous pouvez structurer votre nomenclature autour de l'objet de conception. Plus précisément ce que j'appelle de la Propriété et de la Relation.

    Propriété

    Mots-clés qui décrivent l'objet, pourrait être séparés par des traits d'union.

    de voiture-nouvelle-tourner à droite

    Les mots clés qui décrivent l'objet peut également se répartissent en quatre catégories (qui doivent être ordonnés de gauche à droite):
    Objet, objet-le Descripteur de l'Action, et l'Action de Descripteur.

    voiture - un nom et un objet

    nouveau - un adjectif, et un objet de descripteur qui décrit l'objet 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

    Remarque: les verbes d'action (les actions) doit être dans le passé (tourné, n'ont, couru, etc).

    Relation

    Les objets peuvent également avoir des relations comme le parent et l'enfant. L'Action et de l'Action-Descripteur appartient à l'objet parent, ils n'appartiennent pas à l'objet enfant. Pour les relations entre les objets, vous pouvez utiliser un caractère de soulignement.

    de voiture-nouvelle-tourné-right_wheel-gauche-tourner à gauche

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

    Notes finales:

    • Parce que le CSS n'est pas sensible à la casse, c'est mieux d'écrire tous les noms en minuscules (ou majuscules); éviter de chameau cas ou pascal cas, car ils peuvent conduire à des noms ambigus.
    • Savoir quand utiliser une classe et quand utiliser un id. Ce n'est pas juste une id utilisé une fois sur la page web. La plupart du temps, vous voulez utiliser une classe et non un id. Web comme composants (boutons, formulaires, panneaux, ...etc) doit toujours utiliser une classe. Id peut facilement conduire à des conflits de noms, et doit être utilisé avec parcimonie pour namespacing votre balisage. Ci-dessus les concepts de propriété et la relation qui s'appliquent à de nommage des classes et des id, et vous aidera à éviter les conflits de noms.
    • Si vous n'aimez pas mon CSS convention de nommage, il existe plusieurs autres: Structurelle convention de nommage, de Présentation de convention de nommage, Sémantique convention de nommage, BEM convention de nommage, OCSS convention de nommage, etc.
    InformationsquelleAutor tfmontague
  5. 9

    Juste une norme alternative à considérer:

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

    Et dans votre script:

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

    Ce utilise juste un camelCase, under_score, et le trait d'union-ation respectivement pour les variables id et des classes. J'ai lu à propos de cette norme sur un couple de différents sites web. Bien qu'un peu redondant dans le css/sélecteurs jquery, licenciements rendre plus facile pour repérer les erreurs. par exemple: Si vous voyez .unknown_name ou #unknownName dans votre fichier CSS, vous savez que vous avez besoin de comprendre ce qui est en fait allusion.

    • même que ma préférence. camelCase pour les variables et les under_score pour id, cependant, j'ai l'habitude d'appliquer under_scores pour les deux classes et les noms de trop.
    InformationsquelleAutor RoboticRenaissance
  6. 4

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

    À l'aide de raccourcis clavier comme option + gauche/droit (ou ctrl+gauche/droit sur Windows) pour traverser le code de mot en mot s'arrête le curseur à chaque tableau de bord, vous permettant précisément traverse 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 de la dérive à droite au-dessus d'eux comme si c'étaient tous un seul mot.

    • Juste pour que les autres ne vous trompez pas: Pour Windows, c'est CTRL + GAUCHE / DROITE
    InformationsquelleAutor Kyle Vassella
  7. 1

    Récemment, j'ai commencé à apprendre le XML. Le trait de soulignement version m'aide à me séparer de tout ce XML (DOM, XSD, etc.) les langages de programmation tels que Java, JavaScript (camel cas). Et je suis d'accord avec vous que l'utilisation d'identificateurs qui sont autorisés dans les langages de programmation a l'air mieux.

    Edit: Peut être sans rapport, mais voici un lien pour les règles et recommandations concernant le nommage des éléments XML qui je l'ai suivi lors de la dénomination de l'ids (sections "XML Règles de Nommage" et des "Meilleures Pratiques de nomination").

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

    InformationsquelleAutor mkdrive2
  8. 0

    Je pense qu'il est dépendant de la plate-forme. Lors de l'élaboration de dans .Net MVC, j'utilise bootstrap style minuscules et des traits d'union pour les noms de classe, mais pour id-je utiliser PascalCase.

    Le raisonnement derrière cela est que mon point de vue soutenu par fortement typé modèles de vue. Propriétés de C# sont les modèles de pascal cas. Pour l'amour du modèle de liaison avec MVC, il est logique que les noms des éléments HTML qui lient le modèle sont cohérents avec le modèle de vue des propriétés qui sont pascal cas. Pour des raisons de simplicité mes identifiants sont utiliser la même convention de nommage que les noms des éléments, sauf pour les boutons radio et les cases à cocher qui nécessitent des identifiants uniques pour chaque élément nommé dans le groupe d'entrée.

    InformationsquelleAutor Louise Eggleton