Por que os traços são preferidos para os seletores CSS / atributos HTML?

No passado, sempre usei sublinhados para definir atributos de classe e ID em HTML. Nos últimos anos, mudei para traços, principalmente para me alinhar com a tendência da comunidade , não necessariamente porque fazia sentido para mim.

Eu sempre pensei que traços têm mais desvantagens e não vejo os benefícios:

Conclusão e edição de código

A maioria dos editores trata os traços como separadores de palavras; portanto, não consigo acessar o símbolo que desejo. Digamos que a turma seja " featured-product", preciso concluir automaticamente " featured", inserir um hífen e concluir " product".

Com sublinhados " featured_product" é tratado como uma palavra, para que possa ser preenchido em uma etapa.

O mesmo se aplica à navegação no documento. Pular com palavras ou clicar duas vezes nos nomes das classes é interrompido por hífens.

(Geralmente, penso em classes e IDs como tokens , por isso não faz sentido para mim que um token seja tão facilmente divisível em hífens.)

Ambiguidade com operador aritmético

O uso de traços interrompe o acesso à propriedade do objeto para formar elementos em JavaScript. Isso só é possível com sublinhados:

form.first_name.value='Stormageddon';

(É certo que eu não acesso aos elementos do formulário dessa maneira, mas, ao decidir sobre traços e sublinhados como regra universal, considere que alguém pode.)

Idiomas como o Sass (especialmente em toda a estrutura do Compass ) definiram traços como padrão, mesmo para nomes de variáveis. Eles originalmente usaram sublinhados no começo também. O fato de isso ser analisado de maneira diferente me parece estranho:

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

Inconsistência com a nomeação de variáveis ​​entre idiomas

No passado, eu costumava escrever underscored_namespara variáveis ​​em PHP, ruby, HTML / CSS e JavaScript. Isso era conveniente e consistente, mas, novamente, para "encaixar" agora eu uso:

• dash-case em HTML / CSS
• camelCase em JavaScript
• underscore_case em PHP e ruby

Isso realmente não me incomoda muito, mas eu me pergunto por que elas se tornaram tão desalinhadas, aparentemente de propósito. Pelo menos com sublinhados, foi possível manter a consistência:

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

As diferenças criam situações em que precisamos traduzir seqüências desnecessariamente, juntamente com o potencial de erros.

Por isso, pergunto: Por que a comunidade quase universalmente se contentou com traços e existem razões que superam os sublinhados?

Há uma pergunta relacionada na época em que isso começou, mas sou da opinião de que não é (ou não deveria ter sido) apenas uma questão de gosto. Eu gostaria de entender por que todos concordamos com esta convenção, se realmente era apenas uma questão de gosto.

Conclusão de código

Se o traço é interpretado como pontuação ou como um identificador opaco depende do editor escolhido, eu acho. No entanto, como preferência pessoal, sou a favor de poder tabular entre cada palavra em um arquivo CSS e seria irritante se elas fossem separadas por sublinhado e não houvesse paradas.

Além disso, o uso de hífens permite tirar proveito do seletor de atributo | = , que seleciona qualquer elemento que contenha o texto, seguido opcionalmente por um traço:

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

Isso faria com que os seguintes elementos HTML tivessem o estilo de fonte em itálico:

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

Ambiguidade com operador aritmético

Eu diria que o acesso aos elementos HTML via notação de ponto no JavaScript é um bug e não um recurso. É uma construção terrível desde os primeiros dias de implementações terríveis de JavaScript e não é realmente uma ótima prática. Para a maioria das coisas que você faz com JavaScript atualmente, convém usar seletores CSS para buscar elementos do DOM de qualquer maneira, o que torna toda a notação de ponto inútil. Qual você prefere?

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

Acho as duas primeiras opções muito mais preferíveis, especialmente porque '#first-name'podem ser substituídas por uma variável JavaScript e construídas dinamicamente. Eu também os acho mais agradáveis ​​aos olhos.

O fato de o Sass ativar a aritmética em suas extensões ao CSS não se aplica realmente ao CSS, mas eu entendo (e aceito) o fato de o Sass seguir o estilo de linguagem do CSS (exceto o $prefixo de variáveis, o que, é claro, deve foram @). Para que os documentos Sass pareçam e pareçam documentos CSS, eles precisam seguir o mesmo estilo que o CSS, que usa o traço como delimitador. No CSS3, a aritmética é limitada à calcfunção, que mostra que, no próprio CSS, isso não é um problema.

Inconsistência com a nomeação de variáveis ​​entre idiomas

Todas as linguagens, como linguagens de marcação, linguagens de programação, linguagens de estilo ou linguagens de script, têm seu próprio estilo. Você encontrará isso em sub-idiomas de grupos de idiomas como XML, onde, por exemplo, o XSLT usa letras minúsculas com delimitadores de hífen e o XML Schema usa camel-caseing.

Em geral, você descobrirá que adotar o estilo que parece e mais "nativo" para o idioma em que está escrevendo é melhor do que tentar introduzir seu próprio estilo em cada idioma diferente. Como você não pode evitar o uso de bibliotecas nativas e construções de linguagem, seu estilo será "poluído" pelo estilo nativo, quer você goste ou não, por isso é praticamente inútil tentar.

Meu conselho é não encontrar um estilo favorito entre os idiomas, mas sinta-se em casa em cada idioma e aprenda a amar todas as suas peculiaridades. Uma das peculiaridades do CSS é que palavras-chave e identificadores são escritos em letras minúsculas e separados por hífens. Pessoalmente, acho isso visualmente atraente e acho que ele se encaixa no HTML todo em minúsculas (embora sem hífen) .

Talvez uma das principais razões pelas quais a comunidade HTML / CSS se alinhe com traços em vez de sublinhados seja devido a deficiências históricas nas especificações e nas implementações do navegador.

De um documento da Mozilla publicado em março de 2001 @ https://developer.mozilla.org/en-US/docs/Underscores_in_class_and_ID_Names

A especificação CSS1, publicada em sua forma final em 1996, não permitia o uso de sublinhados nos nomes de classe e ID, a menos que eles "escapassem". Um sublinhado de escape seria mais ou menos assim:

    p.urgent\_note {color: maroon;}

No entanto, isso não era bem suportado pelos navegadores, e a prática nunca pegou. O CSS2, publicado em 1998, também proibiu o uso de sublinhados nos nomes de classe e ID. No entanto, as erratas das especificações publicadas no início de 2001 tornaram os sublinhados legais pela primeira vez. Infelizmente, isso complicou uma paisagem já complexa.

Eu geralmente gosto de sublinhados, mas a barra invertida apenas a torna feia além da esperança, sem mencionar o apoio escasso da época. Eu posso entender por que os desenvolvedores evitaram isso como uma praga. É claro que não precisamos da barra invertida hoje em dia, mas a etiqueta do traço já foi firmemente estabelecida.

Eu não acho que alguém possa responder isso definitivamente, mas aqui estão meus palpites:

1. Os sublinhados precisam pressionar a tecla Shift e, portanto, são mais difíceis de digitar.

2. Os seletores de CSS que fazem parte das especificações oficiais de CSS usam traços (como pseudo-classes como: primeiro filho e pseudo-elementos: primeira linha), não sublinhados. O mesmo vale para propriedades, por exemplo, decoração de texto, cor de fundo, etc. Programadores são criaturas de hábitos. Faz sentido que eles sigam o estilo do padrão, se não houver uma boa razão para não fazê-lo.

3. Este está mais à frente, mas ... Seja mito ou fato, existe uma idéia antiga de que o Google trata palavras separadas por sublinhados como uma única palavra e palavras separadas por traços como palavras separadas. (Matt Cutts em Sublinhados vs. Dashes.) Por esse motivo, sei que agora minha preferência para criar URLs de página é usar palavras com traços e, para mim, pelo menos, isso aconteceu em minhas convenções de nomenclatura para outras coisas. , como seletores de CSS.

Existem muitas razões, mas uma das coisas mais importantes é manter a consistência .

Eu acho que este artigo explica isso de forma abrangente.

CSS é uma sintaxe delimitada por hífen. Com isto quero dizer que escrever coisas como font-size, line-height, border-bottometc.

Assim:

Você simplesmente não deve misturar sintaxes: é inconsistente .

Houve um aumento claro nos segmentos de URLs separados por hífen e palavra inteira nos últimos anos. Isso é incentivado pelas melhores práticas de SEO. O Google "recomenda explicitamente que você use hífens (-) em vez de sublinhados (_) nos seus URLs": http://www.google.com/support/webmasters/bin/answer.py?answer=76329 .

Como observado, diferentes convenções prevaleceram em momentos diferentes em diferentes contextos, mas geralmente não fazem parte formal de nenhum protocolo ou estrutura.

Minha hipótese, então, é que a posição do Google ancora esse padrão em um contexto-chave (SEO), e a tendência de usar esse padrão nos nomes de classe, ID e atributo é simplesmente o rebanho se movendo lentamente nessa direção geral.

Eu acho que é uma coisa dependente de programador. Alguém gosta de usar traços, outros usam sublinhados.
Eu pessoalmente uso sublinhado ( _) porque também o uso em outros lugares. Tais como:
- Variáveis ​​JavaScript ( var my_name);
- Minhas ações do controlador ( public function view_detail)
Outro motivo pelo qual eu uso sublinhados é que, na maioria dos IDEs, duas palavras separadas por sublinhado são consideradas como 1 palavra. (e é possível selecionar com double_click).