Pourquoi les tirets sont-ils préférés pour les sélecteurs CSS / attributs HTML?

dans le passé, j'ai toujours utilisé des soulignements pour définir classe et id attributs en HTML. Au cours des dernières années, j'ai changé pour des tirets , surtout pour m'aligner avec la tendance dans la communauté , pas nécessairement parce que cela avait du sens pour moi.

j'ai toujours pensé que les tirets ont plus d'inconvénients, et je ne vois pas les avantages:

complétion de Code & Édition

la plupart des éditeurs traitent les tirets comme des séparateurs de mots, donc je ne peux pas afficher le symbole que je veux. Dites que la classe est " featured-product ", je dois auto-remplir" featured ", entrer un trait d'Union, et remplir" product ".

avec des underscores " featured_product " est traité comme un seul mot, il peut donc être rempli en une seule étape.

il en va de même pour la navigation dans le document. Sauter par les mots ou double-cliquer sur la classe noms est cassé par des traits d'union.

(plus généralement, je pense des classes et des ids comme tokens , de sorte qu'il n'a pas de sens pour moi qu'un token devrait être si facilement séparable sur les traits d'Union.)

ambiguïté avec l'opérateur arithmétique

en Utilisant des tirets pauses objet de propriété l'accès à des éléments de formulaire en JavaScript. Cela n'est possible qu'avec des underscores: 

form.first_name.value='Stormageddon';

(Certes, je n'accède pas aux éléments de forme de cette façon moi-même, mais en décidant sur les tirets vs souligne comme une règle universelle, considérer que quelqu'un pourrait.)

les langues comme Sass (en particulier dans le Compass framework) ont réglé sur les tirets comme une norme, même pour les noms variables. Au début, ils utilisaient aussi des underscores. Le fait que ce soit interprété différemment me semble étrange: 

$list-item-10
$list-item - 10

Incohérence avec l'appellation variable à travers les langues

à l'époque, j'écrivais underscored_names pour les variables en PHP, ruby, HTML/CSS, et JavaScript. C'était pratique et cohérent, mais encore une fois pour "s'intégrer" j'utilise maintenant:

  • dash-case in HTML /CSS
  • camelCase en JavaScript
  • underscore_case en PHP et ruby

cela ne me dérange pas vraiment trop, mais je me demande pourquoi ceux-ci sont devenus si désalignés, apparemment sur le but. Au moins avec des underscores il était possible de maintenir la cohérence: 

var featured_product = $('#featured_product'); // instead of
var featuredProduct = $('#featured-product');

les différences créent des situations où nous devons traduire des chaînes inutilement, avec le potentiel de bugs.

alors je demande: Pourquoi la communauté s'est-elle presque universellement établie sur tirets, et y a-t-il des raisons qui l'emportent sur les soulignements?

il y a une question connexe de l'époque où cela a commencé, mais je suis d'avis que ce n'est pas (ou ne devrait pas ont été) juste une question de goût. J'aimerais comprendre pourquoi nous nous sommes tous entendus sur cette convention si ce n'était qu'une question de goût.

191
demandé sur Community 2011-09-27 00:18:13

6 réponses

complétion de Code

si dash est interprété comme une ponctuation ou comme un identifiant opaque dépend de l'éditeur de choix, je suppose. Cependant, en tant que préférence personnelle, je préfère être en mesure de tabuler entre chaque mot dans un fichier CSS et le trouverait ennuyeux s'ils étaient séparés avec underscore et il n'y avait pas d'arrêts.

aussi, en utilisant des traits d'Union vous permet de profiter du | = sélecteur d'attribut , qui sélectionne tout élément contenant le texte, éventuellement suivi d'un tiret: 

span[class|="em"] { font-style: italic; }

cela ferait des éléments HTML suivants une police de caractères italiques: 

<span class="em">I'm italic</span>
<span class="em-strong">I'm italic too</span>

ambiguïté avec opérateur arithmétique

je dirais que l'accès aux éléments HTML via la notation des points en JavaScript est un bug plutôt qu'une fonctionnalité. C'est une construction terrible des premiers jours de terribles implémentations JavaScript et n'est pas vraiment une grande pratique. Pour la plupart des choses que vous faites avec JavaScript ces jours-ci, vous voudriez utiliser CSS Selectors pour récupérer des éléments du DOM de toute façon, ce qui rend la notation de point entier plutôt inutile. Lequel préférez-vous? 

var firstName = $('#first-name');
var firstName = document.querySelector('#first-name');
var firstName = document.forms[0].first_name;

je trouve les deux premières options beaucoup plus préférables, d'autant plus que '#first-name' peut être remplacé par une variable JavaScript et construit dynamiquement. Je les trouve aussi plus agréables aux yeux.

le fait que Sass permette l'arithmétique dans ses extensions à CSS ne s'applique pas vraiment à CSS lui-même, mais je comprends (et j'embrasse) le fait que Sass suit le style de langue de CSS (sauf pour le préfixe $ des variables, qui, bien sûr, aurait dû être @ ). Si les documents Sass doivent ressembler à des documents CSS, ils doivent suivre le même style que CSS, qui utilise dash comme délimiteur. En CSS3, l'arithmétique est limitée à la calc fonction, ce qui montre que dans CSS lui-même, ce n'est pas un problème.

Incohérence avec l'appellation variable à travers les langues

tous les langages, qu'il s'agisse de langages de balisage, de langages de programmation, de langages de style ou de langages de script, ont leur propre style. Vous trouverez cela dans les sous-Langues des groupes de langues comme XML, où par exemple XSLT utilise des minuscules avec des délimiteurs de trait d'Union et "1519340920 de Schéma XML" utilise des chameaux boîtier.

en général, vous trouverez que l'adoption du style qui semble le plus" indigène " à la langue que vous écrivez est mieux que d'essayer de souder-horn votre propre style dans chaque langue différente. Puisque vous ne pouvez pas éviter d'avoir à utiliser des bibliothèques natives et des constructions linguistiques, votre style sera "pollué" par le style natif que vous le vouliez ou non, donc il est assez futile d'essayer.

mon conseil est de ne pas trouver un style préféré à travers les langues, mais au lieu de faire vous-même à la maison dans chaque langue et apprendre à aimer toutes ses bizarreries. Une des bizarreries de CSS est que les mots-clés et les identificateurs sont écrits en minuscules et séparés par des traits d'Union. Personnellement, je trouve cela très attrayant visuellement et je pense qu'il s'inscrit dans le all-lowercase (bien que no-tiret) HTML .

121
répondu Asbjørn Ulsberg 2011-09-26 21:14:52

peut-être que l'une des principales raisons pour lesquelles la communauté HTML/CSS s'est alignée sur les tirets plutôt que sur les soulignements est due à des lacunes historiques dans les spécifications et les implémentations de navigateur.

D'un Mozilla doc publié en mars 2001 @ https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names

la spécification CSS1, publiée sous sa forme finale en 1996, ne permettre l'utilisation de souligne dans les noms de classe et D'identité à moins qu'ils ont "échappé."Un underscore échappé ressemblerait à quelque chose comme ceci: 

    p.urgent\_note {color: maroon;}

cela n'était pas bien pris en charge par les navigateurs à l'époque, et le la pratique n'a jamais pris. CSS2, publié en 1998, interdit également l'utilisation de underscores dans les noms de classe et D'identité. Cependant, errata à la spécification publiée au début de 2001 première fois. Cela a malheureusement compliqué déjà complexe paysage.

j'aime généralement les underscores mais le revers le rend tout simplement laid au-delà de l'espoir, sans mentionner le peu de soutien à l'époque. Je peux comprendre pourquoi les développeurs l'ont évité comme la peste. Bien sûr, nous n'avons pas besoin de la réaction en retour de nos jours, mais l'étiquette dash-etiquette a déjà été fermement établie.

51
répondu user193130 2013-11-27 21:08:02

Je ne pense pas que quiconque puisse répondre à cela de manière définitive, mais voici mes suppositions instruites:

  1. les soulignements nécessitent de frapper la touche Shift, et sont donc plus difficiles à taper.

  2. les sélecteurs CSS qui font partie des spécifications CSS officielles utilisent des tirets (tels que des pseudo-classes comme :first-child et pseudo-éléments :first-line), et non des soulignements. Même chose pour les propriétés, par exemple texte-décoration, couleur d'arrière-plan, etc. Les programmeurs sont des créatures d'habitude. Il est logique qu'ils suivent les normes du style si il n'y a aucune bonne raison de ne pas.

  3. celui-ci est plus loin sur le rebord, mais... Que ce soit un mythe ou un fait, il existe une idée de longue date selon laquelle Google traite les mots séparés par des underscores comme un seul mot, et les mots séparés par des tirets comme des mots séparés. (Matt Cutts sur Souligne vs Tirets.) pour ce raison, je sais que ma préférence maintenant pour la création D'URLs de page est d'utiliser-words-with-dashes, et pour moi au moins, cela a saigné dans Mes conventions de nommage pour d'autres choses, comme les sélecteurs CSS.

37
répondu Mason G. Zhwiti 2011-09-27 03:32:09

au cours des dernières années, il y a eu une nette amélioration dans les segments de mots entiers séparés par un trait d'union des URLs. Cela est encouragé par les pratiques exemplaires du SEO. Google explicitement "recommander que vous utilisez des traits d'Union ( - ) au lieu de underscores ( _ ) dans vos URLs": http://www.google.com/support/webmasters/bin/answer.py?answer=76329 .

comme nous l'avons vu, différentes conventions ont prévalu à différents moments dans différents contextes, mais elles ne sont généralement pas formelles. le cadre d'un protocole ou d'un cadre.

mon hypothèse, donc, est que la position de Google ancre Ce modèle dans un contexte clé (SEO), et la tendance à utiliser ce modèle dans les noms de classe, d'id, et d'attribut est simplement le troupeau se déplaçant lentement dans cette direction générale.

11
répondu Faust 2011-09-26 22:16:24

il y a plusieurs raisons, mais l'une des plus importantes est de maintenir consistance .

je pense ce l'article explique de façon globale.

CSS est une syntaxe délimitée par un trait d'Union. Par ceci je veux dire que nous écrivons des choses comme font-size , line-height , border-bottom etc.

:

Vous venez de ne pas mélanger syntaxes: c'est incohérent .

4
répondu simhumileco 2017-03-22 09:39:25

je pense que c'est un truc dépendant du programmeur. Certains aiment utiliser des tirets, d'autres utilisent des underscores.

J'utilise personnellement les underscores ( _ ) parce que je l'utilise dans d'autres endroits aussi. Tels que:

- Variables JavaScript( var my_name );

- Mes actions de controller( public function view_detail )

Une autre raison que j'utilise souligne, est que dans la plupart des IDEs deux mots séparés par souligne sont considéré comme 1 mot. (et sont possibles de sélectionner avec double_click).

2
répondu Ali Farhoudi 2016-06-29 07:43:32