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:
id="someIdentifier"'
- semble assez cohérent avec le code javascript.id="some-identifier"
- ressemble plus à des attributs de type html5 et à d'autres choses en html.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?
html
css
naming-conventions
standards
egervari
la source
la source
Réponses:
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
no
devientyes
peut - ê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.
la source
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 .
la source
Je vous suggère d'utiliser un trait de soulignement au lieu d'un trait d'union (-), car ...
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
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.
la source
var x = document.myForm['my-Id'].value;
getElementById('whatever-you-want_my_friend')
. Ça dépend. Si votre code a un codage backend (côté serveur) rendant le HTML, utiliser camelCase pour correspondre à vos conventions de dénomination, ou snake_case, quel que soit votre langage de codage, est probablement le meilleur pour que la recherche dans votre code frontal et arrière soit concordante.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:
Et dans votre script:
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_name
ou#unknownName
dans 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.la source
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.
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.
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.
Notes finales:
la source
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.
la source
the-red-box
est impossible à sélectionner avec un simple double clic ou deux pressions de touches. Aussi cmd / ctrl + D pour vsCode. Au lieu de cela, vous devez aller plusieurs fois ou faire glisser-sélectionner avec la souris. Maisthe_red_box
prend en charge les trois raccourcis faciles à sélectionner.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
la source
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é.
la source