65

Já vi gente recomendando nunca usar _ (underscore) em HTML e CSS. Ao invés disso, deveríamos dar preferência para -.

Exemplo:

// Errado
<div id="minha_div" class="minha_classe"></div>

// Certo
<div id="minha-div" class="minha-classe"></div>

Por que existe essa recomendação?

1
  • Creio que hoje seje por nostalgia ou por costume antigo, não existe uma padronização oficial no W3C especificando isso
    – Dorath
    Commented 10/06/2014 às 14:04

3 Respostas 3

56

A especificação de 1996 do CSS1 não permitia underscore em nomes de classes ou IDS, a não ser que elas estivessem "escapadas"

p.#minha\_id {
  color: #fff;
}

O CSS2 (publicado em 1998) proibiu o uso do underscore. Uma errata posterior (2001) tornou o uso novamente permitido.

Hoje em dia praticamente todos browsers aceitam o underscore, mas a recomendação de não utilizar se mantém.

3
  • 3
    Mas a recomendação de não utilizar se mantém Mas não há nenhum motivo particular então?
    – user7261
    Commented 10/06/2014 às 14:09
  • 6
    @Andrey O motivo é esse: não há como garantir com certeza de que o navegador que o usuário está usando suporta underscore, apesar de todo navegador moderno dar suporte. Commented 10/06/2014 às 14:14
  • 4
    A especificação do CSS1 já é maior de idade - se você usa underscores no seu CSS e o navegador do usuário tiver problemas com isso, o problema é composto pelo usuário e pelo navegador, não pelo seu CSS. De qualquer forma, +1 pela resposta - eu jamais descobriria isso sem tê-la visto. Commented 10/06/2014 às 14:37
23

Para complementar a resposta do @Beterraba, vou deixar uma opnião, sobre o assunto:

Além das especificações oficias CSS utilizarem dashes (traços), acredito que dashes é recomendável também por questões de convenções de código, exemplo:

pseudo-elementos: first-letter, first-line ...
pseudo-classes: :first-child, :nth-child ...
propriedades: text-decoration, background-color, e etc...

Observe que a segunda opção abaixo, parece mais bem escrita conforme a linguagem

.minha_classe:first-letter {font-size:300%;}
.minha-classe:first-letter {font-size:300%;}

Pode ser difícil notar neste código simples, mais imagine em centenas ou milhares de linhas escritas na primeira maneira.

Agora imagine quando utilizamos Bootstrap por exemplo, para adicionar uma classe específica ao código, exemplo:

<div class="col-lg-12 minha_classe"></div>
<div class="col-lg-12 minha-classe"></div>

Novamente parece melhor utilizar dash.

Agora uma curiosidade não relacionada a dúvida de CSS, conforme esta matéria Dashes vs Underscores, até pouco tempo atrás, o Google tratava palavras separadas por underscore (css_html) como uma única palavra e palavras separadas por dash (css-html) como palavras distintas. É por isso que é muito comum quando trabalhamos com url amigável utilizar dash ao invés de underscore.

1
  • Bem colocado. Assim fica mesmo bem mais uniforme.
    – user7261
    Commented 10/06/2014 às 19:06
-3

Estou trabalhando com a metodologia da BEM e estou gostando muito, código legível é tudo!

Um simples resumo:

A BEM sigla para Block Element Modifier (Bloco Elemento Modificador), sugere uma estrutura para nomear as classes da sua folha de estilo baseando-se no elemento em questão. Quando utilizamos a metodologia BEM é importante nos lembrarmos que ela zela pelo uso de ‘classes’ CSS e não IDs, pelo fato das classes serem reutilizáveis.

Block : Um bloco pode ser simples ou composto (conter outros blocos internos), basicamente ele funciona como um container

.block {}

block

Element : Um elemento é uma “peça” do bloco. Temos o bloco como um container e os elementos são as peças inseridas nele, que desempenham funções específicas.

Um Input e um Search Button são elementos de um Search Block:

.block__element {}

element

Modifier : A metodologia BEM sugere que se for preciso criar um modificador, o mesmo deve ser feito adicionando-se dois hífens ( — ) após o nome do elemento ou bloco a ser modificado. O que nos dá uma estrutura com esse aspecto:

.block--modifier {}

.block__element--modifier {}

.header__navigation {}

.header__navigation--secondary {}

Partindo do pressuposto que sua navigation secundária provavelmente vai possuir os mesmos aspectos da anterior.

fonte: u.planb.com.br/blog/ti/metodologia-bem/

Você deve fazer log-in para responder a esta pergunta.