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

Question

Dans le passé, j'ai toujours utilisé des traits de soulignement pour définir la classe et id attributs en HTML. Au cours des dernières années, je suis passé aux tirets, principalement pour m'aligner sur la tendance de la communauté , pas nécessairement parce que cela me semblait logique.

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

Achèvement du code et édition

La plupart des éditeurs considèrent les tirets comme des séparateurs de mots. Je ne peux donc pas passer au symbole que je veux. Dites que la classe est "featured-product ", Je dois compléter automatiquement" featured ", entrer un trait d'union et compléter" product ".

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

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

(Plus généralement, je considère les classes et les identifiants comme des jetons ; .)

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

L'utilisation de tirets casse propriété-objet accès aux éléments de formulaire en JavaScript. Ceci n'est possible qu'avec des traits de soulignement:

form.first_name.value='Stormageddon';

(Certes, je n’accède pas moi-même aux éléments de formulaire de cette façon, mais lorsque vous décidez de faire des tirets ou des traits de soulignement comme une règle universelle, considérez qu’une personne pourrait le faire.)

Des langages comme Sass (en particulier dans le cadre Compass ) ont opté pour les tirets comme norme, même pour les noms de variables. Au début, ils utilisaient aussi des traits de soulignement. Le fait que cela soit analysé différemment me semble étrange:

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

Incohérence avec la dénomination des variables entre les langues

À l'époque, j'écrivais underscored_names pour les variables 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 en HTML/CSS
camelCase en JavaScript
underscore_case in PHP et Ruby

Cela ne me dérange pas vraiment trop, mais je me demande pourquoi ils sont devenus si mal alignés, apparemment à dessein. Au moins avec les caractères de soulignement, 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 de caractères inutilement, avec le potentiel de bugs.

Je demande donc: pourquoi la communauté a-t-elle presque universellement opté pour des tirets, et y a-t-il des raisons qui l'emportent sur les traits de soulignement?

Il y a une question connexe à partir du moment 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 avons tous opté pour cette convention si ce n'était qu'une question de goût.

Asbj&#248;rn Ulsberg · Accepted Answer

Complétion de code

Je suppose que le tiret est interprété comme une ponctuation ou comme un identifiant opaque. Cependant, en tant que préférence personnelle, je préfère pouvoir intercaler chaque mot dans un fichier CSS et le trouverais gênant s’il était séparé par un trait de soulignement et qu’il n’y avait pas d’arrêt.

De plus, l'utilisation de tirets vous permet de tirer parti du = sélecteur d'attribut , qui sélectionne tout élément contenant le texte, suivi éventuellement d'un tiret:

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

Cela donnerait aux éléments HTML suivants un style de police italique:

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

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

Je dirais que l'accès aux éléments HTML via la notation de points en JavaScript est un bug plutôt qu'une fonctionnalité. C'est une construction terrible des débuts de terribles implémentations de JavaScript et ce n'est pas vraiment une bonne pratique. Pour la plupart des choses que vous faites avec JavaScript ces jours-ci, vous voudriez utiliser sélecteurs CSS pour récupérer des éléments depuis le DOM, ce qui rend toute la notation par points plutôt inutile. Lequel préfèrerais tu?

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

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

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

Incohérence avec la dénomination des variables entre les langues

Toutes les langues, qu’il s’agisse de langages de balisage, de programmation, de stylisation ou de script, ont leur propre style. Vous le trouverez dans les sous-langues de groupes de langues tels que XML, où par exemple. XSLT utilise des minuscules avec des délimiteurs de trait d'union et XML Schema utilise des chameaux.

En général, vous constaterez qu'il vaut mieux adopter le style qui vous ressemble et qui est le plus "natif" de la langue dans laquelle vous écrivez, plutôt que d'essayer de personnaliser votre propre style dans chaque langue. Etant donné que vous ne pouvez pas éviter d'avoir à utiliser des constructions de langage et de bibliothèques natives, votre style sera "pollué" par le style natif, que cela vous plaise ou non, il est donc pratiquement inutile d'essayer.

Mon conseil est de ne pas trouver un style préféré parmi les langues, mais de vous faire à la maison dans chaque langue et d'apprendre à aimer toutes ses bizarreries. L'une des particularités de CSS est que les mots-clés et les identifiants sont écrits en minuscules et séparés par des traits d'union. Personnellement, je trouve cela très attrayant et pense que cela s’adapte parfaitement à la minuscule (bien qu’il n’y ait pas de trait d’union) HTML .

user193130 · Answer

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 du navigateur.

Extrait d'un document de Mozilla publié en mars 2001 @ https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names

La spécification CSS1, publiée dans sa forme définitive en 1996, ne permettait pas l'utilisation de traits de soulignement dans les noms de classe et d'ID, à moins qu'ils ne soient "échappés". Un tiret bas échappé ressemblerait à quelque chose comme ça:
 p.urgent\_note {color: maroon;} 
Cela n’était cependant pas bien supporté par les navigateurs à l’époque et cette pratique n’a jamais fait son chemin. CSS2, publié en 1998, interdisait également l’utilisation de traits de soulignement dans les noms de classe et d’ID. Cependant, les errata des spécifications publiées au début de 2001 ont légalisé les soulignements pour la première fois. Cela a malheureusement compliqué un paysage déjà complexe.

J'aime généralement les caractères de soulignement, mais la barre oblique inverse le rend tout simplement moche au-delà de tout espoir, sans parler du support rare à 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 barre oblique inverse de nos jours, mais l'étiquette-tableau de bord est déjà bien établie.

Mason G. Zhwiti · Answer

Je ne pense pas que quiconque puisse répondre définitivement à cette question, mais voici mes suppositions éclairées:

Les traits de soulignement nécessitent d'appuyer sur la touche Maj et sont donc plus difficiles à taper.
Les sélecteurs CSS qui font partie des spécifications CSS officielles utilisent des tirets (tels que des pseudo-classes telles que: premier enfant et pseudo-éléments: première ligne), et non des traits de soulignement. 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 le style de la norme s'il n'y a aucune bonne raison de ne pas le faire.
Celui-ci est plus avancé, mais ... Qu'il s'agisse d'un mythe ou d'un fait, il existe une idée ancienne selon laquelle Google traite les mots séparés par des traits de soulignement comme un seul mot et les mots séparés par des tirets comme des mots séparés. (Matt Cutts on Underscores vs. Dashes.) Pour cette raison, je sais que ma préférence actuelle pour la création d'URL de page est d'utiliser des mots avec des tirets. Pour moi, cela a saigné. dans mes conventions de nommage pour d'autres choses, comme les sélecteurs CSS.

Faust · Answer

Ces dernières années, il y a eu une nette augmentation des segments d'URL de mots entiers séparés par un trait d'union. Ceci est encouragé par les meilleures pratiques de référencement. Google recommande explicitement d'utiliser des tirets (-) au lieu de traits de soulignement (_) dans vos URL ": http://www.google.com/support/webmasters/bin/answer.py?answer=76329 .

Comme indiqué, différentes conventions ont prévalu à différents moments dans différents contextes, mais elles ne font généralement pas partie intégrante d’un protocole ou d’un cadre.

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

simhumileco · Answer

Il y a plusieurs raisons, mais l'une des choses les plus importantes est de maintenir la cohérence .

Je pense que this l'article l'explique de manière exhaustive.

CSS est une syntaxe délimitée par des tirets. J'entends par là que nous écrivons des choses comme font-size, line-height, border-bottom etc.

Alors:

Vous ne devriez pas simplement mélanger les syntaxes: il est incohérent .

Ali Farhoudi · Answer

Je pense que c'est une chose dépendante du programmeur. Certains aiment utiliser des tirets, d'autres des tirets bas.
J'utilise personnellement les traits de soulignement (_) parce que je l’utilise aussi à d’autres endroits. Tel que:
- Variables JavaScript (var my_name);
- Mes actions de contrôleur (public function view_detail)
Une autre raison pour laquelle j’utilise les traits de soulignement est que, dans la plupart des IDE, deux mots séparés par des traits de soulignement sont considérés comme un mot. (et sont possibles à sélectionner avec double_click).