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

Dans le passé, j'ai toujours utilisé des traits de soulignement pour définir les attributs de classe et d' ID 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 avait du sens pour moi.

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

Achèvement et édition du code

La plupart des éditeurs traitent les tirets comme des séparateurs de mots, je ne peux donc pas accéder au symbole souhaité. Dites que la classe est " featured-product", je dois compléter automatiquement " featured", saisir un trait d'union et compléter " product".

Avec des traits de soulignement " 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 des mots ou double-cliquer sur les noms de classe est interrompu par des tirets.

(Plus généralement, je considère les classes et les identifiants comme des jetons , donc cela n'a pas de sens pour moi qu'un jeton devrait être si facilement divisible en traits d'union.)

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

L'utilisation de tirets interrompt l' accès à la propriété de l'objet aux éléments de formulaire en JavaScript. Cela n'est possible qu'avec des soulignements:

form.first_name.value='Stormageddon';

(Certes, je n'accède pas aux éléments de formulaire de cette façon moi-même, mais lorsque vous décidez des tirets par rapport aux traits de soulignement en tant que règle universelle, considérez que quelqu'un pourrait le faire.)

Des langages comme Sass (en particulier dans le cadre de Compass ) se sont installés sur les tirets en standard, même pour les noms de variables. À l'origine, ils ont également utilisé 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 dans toutes les langues

À l'époque, j'écrivais underscored_namesdes variables en PHP, rubis, HTML / CSS et JavaScript. C'était pratique et cohérent, mais encore une fois afin de "s'adapter", j'utilise maintenant:

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

Cela ne me dérange pas vraiment trop, mais je me demande pourquoi ceux-ci sont devenus si mal alignés, apparemment exprès. Au moins avec des soulignements, il a été 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, ainsi que le potentiel de bugs.

Je pose donc la question: pourquoi la communauté s'est-elle presque universellement contentée de tirets, et y a-t-il des raisons qui l'emportent sur les soulignements?

Il y a une question connexe à l'époque où cela a commencé, mais je suis d'avis que ce n'est pas (ou n'aurait pas dû être) une question de goût. J'aimerais comprendre pourquoi nous nous sommes tous installés sur cette convention si ce n'était vraiment qu'une question de goût.

Compléter le code

Que le tiret soit 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 pouvoir tabuler entre chaque mot dans un fichier CSS et je trouverais cela ennuyeux s'ils étaient séparés par un trait de soulignement et qu'il n'y avait pas d'arrêt.

De plus, l'utilisation de tirets 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 donnerait aux éléments HTML suivants un style de police en 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 par 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 ce n'est pas vraiment une excellente pratique. Pour la plupart des choses que vous faites avec JavaScript ces jours-ci, vous voudriez utiliser des sélecteurs CSS pour récupérer des éléments du DOM de toute façon, ce qui rend 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 beaucoup plus préférables, d'autant plus qu'elles '#first-name'peuvent être remplacées par une variable JavaScript et construites dynamiquement. Je les trouve aussi plus agréables aux yeux.

Le fait que Sass permette l'arithmétique dans ses extensions au CSS ne s'applique pas vraiment au CSS lui-même, mais je comprends (et embrasse) le fait que Sass suit le style de langage du CSS (à l'exception du $préfixe des variables, qui bien sûr devrait ont été @). 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 calcfonction, ce qui montre que dans CSS lui-même, ce n'est pas un problème.

Incohérence avec la dénomination des variables dans toutes les langues

Tous les langages, à savoir les langages de balisage, les langages de programmation, les langages de style ou les langages de script, ont leur propre style. Vous le trouverez dans les sous-langues de groupes de langues comme XML, où par exemple XSLT utilise des minuscules avec des délimiteurs de trait d'union et XML Schema utilise un chameau.

En général, vous constaterez qu'il est préférable d'adopter le style qui se sent et ressemble le plus «natif» à la langue dans laquelle vous écrivez que d'essayer de corner votre propre style dans chaque langue différente. Comme vous ne pouvez pas éviter d'avoir à utiliser des bibliothèques natives et des constructions de langage, 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é dans toutes les langues, mais plutôt de se sentir chez soi dans chaque langue et d'apprendre à aimer toutes ses bizarreries. L'une des bizarreries de CSS est que les mots-clés et les identifiants sont écrits en minuscules et séparés par des tirets. Personnellement, je trouve cela très attrayant visuellement et je pense que cela correspond au HTML tout en minuscules (mais sans trait d'union) .

La raison principale pour laquelle la communauté HTML / CSS s'est alignée sur les tirets plutôt que sur les traits de soulignement est peut-être due à des déficiences historiques dans les spécifications et les implémentations du navigateur.

Extrait d'un document Mozilla 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 définitive en 1996, ne permettait pas l'utilisation de traits de soulignement dans les noms de classe et d'ID, sauf s'ils étaient "échappés". Un trait de soulignement échappé ressemblerait à ceci:

    p.urgent\_note {color: maroon;}

Cependant, cela n'était pas bien pris en charge par les navigateurs à l'époque, et la pratique n'a jamais fait son chemin. CSS2, publié en 1998, a également interdit l'utilisation de traits de soulignement dans les noms de classe et d'ID. Cependant, les errata de la spécification publiés au début de 2001 ont rendu les soulignements légaux pour la première fois. Cela a malheureusement compliqué un paysage déjà complexe.

J'aime généralement les traits de soulignement, mais la barre oblique inverse la rend tout simplement moche au-delà de tout espoir, sans parler du soutien limité à 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 de tableau de bord est déjà fermement établie.

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

1. Les traits de soulignement nécessitent d'appuyer sur la touche Maj 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: 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 la décoration du texte, la couleur de fond, 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 pas de bonne raison de ne pas le faire.

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 que 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 maintenant pour la création d'URL de page est d'utiliser des mots avec des tirets, et pour moi au moins, cela a intégré à mes conventions de dénomination pour d'autres choses , comme les sélecteurs CSS.

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

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

CSS est une syntaxe délimitée par des tirets. Je veux dire par nous écrivons des choses comme font-size, line-height, border-bottometc.

Alors:

Il ne faut tout simplement pas mélanger les syntaxes: c'est incohérent .

Ces dernières années, il y a eu une nette augmentation des segments d'URL de mots entiers séparés par des tirets. Ceci est encouragé par les meilleures pratiques de référencement. Google "vous recommande explicitement d'utiliser des tirets (-) au lieu des 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 à des moments différents dans des contextes différents, mais elles ne font généralement partie d'aucun protocole ou cadre.

Mon hypothèse est donc 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, id et attribut est simplement le troupeau se déplaçant lentement dans cette direction générale.

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