Atributos de nomenclatura "classe" e "id" HTML - traços x sublinhados [fechado]

114

<div id="example-value">ou <div id="example_value">?

Este site e o Twitter usam o primeiro estilo. Facebook e Vimeo - o segundo.

Qual você usa e por quê?

html coding-style naming-conventions Emanuil Rusev
fonte
11
Ambos os links estão quebrados
Steve

Respostas:

136

Use hífens para garantir o isolamento entre seu HTML e JavaScript.

Por quê? ver abaixo.

Os hifens são válidos para uso em CSS e HTML, mas não para objetos JavaScript.

Muitos navegadores registram IDs de HTML como objetos globais no objeto janela / documento, em grandes projetos, isso pode se tornar uma verdadeira dor.

Por esse motivo, uso nomes com hífens, dessa forma, os IDs de HTML nunca entrarão em conflito com meu JavaScript.

Considere o seguinte:

message.js

message = function(containerObject){
    this.htmlObject = containerObject;
};
message.prototype.write = function(text){
    this.htmlObject.innerHTML+=text;
};

html

<body>
    <span id='message'></span>
</body>
<script>
    var objectContainer = {};
    if(typeof message == 'undefined'){
        var asyncScript = document.createElement('script');
        asyncScript.onload = function(){
            objectContainer.messageClass = new message(document.getElementById('message'));
            objectContainer.messageClass.write('loaded');
        }
        asyncScript.src = 'message.js';
        document.appendChild(asyncScript);
    }else{
        objectContainer.messageClass = new message(document.getElementById('message'));
        objectContainer.messageClass.write('loaded');
    }
</script>

Se o navegador registrar ids HTML como objetos globais, o código acima falhará porque a mensagem não é 'indefinida' e tentará criar uma instância do objeto HTML. Certificar-se de que um código HTML tem um hífen no nome evita conflitos como o mostrado abaixo:

message.js

message = function(containerObject){
    this.htmlObject = containerObject;
};
message.prototype.write = function(text){
    this.htmlObject.innerHTML+=text;
};

html

<body>
    <span id='message-text'></span>
</body>
<script>
    var objectContainer = {};
    if(typeof message == 'undefined'){
        var asyncScript = document.createElement('script');
        asyncScript.onload = function(){
            objectContainer.messageClass = new message(document.getElementById('message-text'));
            objectContainer.messageClass.write('loaded');
        }
        asyncScript.src = 'message.js';
        document.appendChild(asyncScript);
    }else{
        objectContainer.messageClass = new message(document.getElementById('message-text'));
        objectContainer.messageClass.write('loaded');
    }
</script>

Claro, você pode usar messageText ou message_text, mas isso não resolve o problema e você pode se deparar com o mesmo problema mais tarde, onde acidentalmente acessa um objeto HTML em vez de um JavaScript

Uma observação, você ainda pode acessar os objetos HTML através do objeto window (por exemplo) usando window ['mensagem-texto'];

Raatje
fonte
Não entendi nada da sua postagem aqui, talvez você possa esclarecer. Então você diz que alguns navegadores registram os id's do html como objetos globais e que se você colocar um hífen no id então você irá garantir que não haverá conflito entre esses objetos gerados automaticamente e aqueles que você cria porque hífens não são permitidos . Mas como então o navegador cria esses objetos hifenizados se hifens não são permitidos? parece que teria que removê-los, deixando você com o potencial de um conflito de nomenclatura.
Dallas Caley
@DallasCaley se você não viu, esta resposta foi atualização chamandowindow['message-text'];
Chris Marisic
Ah, eu acho que entendi. Estranho que o javascript não permite que você crie um objeto com um travessão no nome como um objeto autônomo, mas permitirá que você crie um objeto com um travessão no nome se for criado como uma propriedade de outro objeto que não tem um traço no nome.
Dallas Caley
Esta postagem realmente me fez repensar minha posição em quase 100% de acordo com você a partir de uma posição de não que é boba, minha única reserva é dada sua posição sobre o assunto, parece evidente que todo id deveria ter um - nele para evitar que mesmo problema, a menos que você queira especificamente que funcione para alguns IDs em particular.
user254694
87

Eu recomendaria o Guia de estilo HTML / CSS do Google

Ele afirma especificamente :

Separe as palavras no ID e nos nomes das classes com um hífen . Não concatene palavras e abreviações em seletores por quaisquer caracteres (incluindo nenhum), exceto hífens, para melhorar a compreensão e a digitalização.

/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}

/* Not recommended: uses underscore instead of hyphen */
.error_status {}

/* Recommended */
#video-id {}
.ads-sample {}
Klas Mellbourn
fonte
1
E quanto à BEMnotação?
Iulian Onofrei
1
@IulianOnofrei, você é livre para usar o BEM, mas é claro que ele não segue estritamente o Guia de estilo do Google.
Klas Mellbourn 01 de
hmm, muito estranho. O framework GWT do Google usa camelcase. Verifique esta linha de código <h1 id = "appTitle"> </h1> no seguinte documento. gwtproject.org/doc/latest/tutorial/i18n.html
karlihnos
4
Google! = Automaticamente certo. Muitas vezes são, mas apenas ser Google não é uma justificativa suficiente.
Craig Brett
2
Esta é uma ideia muito ruim. Mais cedo ou mais tarde, você desejará usar seu nome em uma linguagem de programação que não suporte hifens em nomes de variáveis ​​(basicamente todos eles), e então BOOM! Regras idiotas de renomeação.
Timmmm
5

Na verdade, é uma questão de preferência, mas o que o influenciará em uma direção específica pode ser o editor com o qual você codifica. Por exemplo, o recurso de autocompletar do TextMate para em um hífen, mas vê as palavras separadas por um sublinhado como uma única palavra. Portanto, os nomes e ids das classes the_postfuncionam melhor do que the-postao usar o recurso de preenchimento automático ( Esc).

Doug Neiner
fonte
você está certo, mas parecerá muito mais confuso na "selva html" circundante
Kamil Tomšík
4

Eu acredito que isso depende inteiramente do programador. Você também pode usar o camelCase se quiser (mas acho que ficaria estranho.)

Eu pessoalmente prefiro o hífen, porque é mais rápido digitar no meu teclado. Portanto, eu diria que você deve escolher o que lhe convém, uma vez que ambos os exemplos são amplamente usados.

adamse
fonte
3
esta pergunta é semelhante e verifica esta resposta stackoverflow.com/questions/70579/…
Matt Smith
2

Qualquer um dos exemplos é perfeitamente válido, você pode até adicionar ":" ou "." como separadores de acordo com as especificações w3c . Eu pessoalmente uso "_" se for um nome de duas palavras apenas por causa de sua semelhança com o espaço.

Myles
fonte
14
Sim, você pode usar dois-pontos e pontos para IDs, mas essa é uma boa maneira de fazer a pessoa que está escrevendo o arquivo CSS odiar você.
Dave Markle
5
Um identificador HTML ZZ:ZZdeve ter como escape ZZ\00003AZZ(CSS2 e superior).
McDowell
1
Não disse que era uma boa prática, disse que era válido.
Myles
5
Parece uma maneira divertida de fazer o jQuery explodir
Mike Robinson
0

Eu uso o primeiro (um-dois) porque é mais legível. Para imagens, porém, prefiro o sublinhado (btn_more.png). O estojo Camel (oneTwo) é outra opção.

eozzy
fonte
0

Na verdade, alguns frameworks externos (javascript, php) têm dificuldades (bugs?) Em usar o hypen em nomes de id. Eu uso o sublinhado (assim como o 960grid) e tudo funciona muito bem.

DavidHavl
fonte
3
Quais? De qualquer forma, a legibilidade do código é muito mais importante.
Kamil Tomšík
-1

Gostaria de sugerir sublinhado principalmente pelo motivo de um efeito colateral de javascript que estou encontrando.

Se você digitar o código abaixo em sua barra de localização, receberá um erro: 'valor-exemplo' é indefinido. Se o div fosse nomeado com sublinhados, funcionaria.

javascript:alert(example-value.currentStyle.hasLayout);
jgreep
fonte
5
Isso deve ser document.getElementById("example-value"), o que funcionará bem.
Chuck
Estou tendo um problema semelhante com a ASP.NET MVC ao especificar um valor para um atributo no parâmetro HtmlAttributes das funções auxiliares Html.
Matthijs Wessels