it-swarm-pt.tech

div class vs id

Ao usar divs, quando é melhor usar uma classe vs id?

É melhor usar classe, por exemplo, variante de fonte ou elementos dentro do html? Em seguida, use o id para a estrutura/contêineres?

Isso é algo em que sempre tive dúvidas, qualquer ajuda seria ótima.

49
Paul

Use id para identificar os elementos dos quais haverá apenas uma instância em uma página. Por exemplo, se você tiver uma única barra de navegação em um local específico, use id="navigation".

Use class para agrupar elementos que se comportam de uma certa maneira. Por exemplo, se você deseja que o nome da sua empresa apareça em negrito no corpo do texto, use <span class='company'>.

83
Jim

A coisa mais importante a entender é que os IDs precisam ser exclusivos: apenas um elemento com um determinado ID deve existir em uma página. Portanto, se você deseja se referir a um elemento específico da página, geralmente é a melhor coisa a usar.

Se você possui vários elementos que são de alguma forma semelhantes, use a classe de elementos para identificá-los.

Um fato muito útil e surpreendentemente pouco conhecido é que você pode realmente aplicar várias classes a um único elemento colocando espaços entre os nomes das classes. Portanto, se você postou uma pergunta que foi escrita pelo usuário conectado no momento, você pode identificá-la com <div class = "question currentAuthor">.

51
Sean McMains

Pense na universidade.

<student id="JonathanSampson" class="Biology" />
<student id="MarySmith" class="Biology" />

Aluno ID os cartões são distintos. Dois estudantes no campus não terão o mesmo aluno ID cartão. No entanto, muitos alunos podem e compartilharão pelo menos um Classe um com o outro.

Não há problema em colocar vários alunos em um Classe título, Biologia 101. Mas nunca é aceitável colocar vários alunos em um aluno ID .

Ao dar Regras no sistema de intercomunicação da escola, você pode dar Regras a um Classe:

"A aula de biologia usaria camisas vermelhas amanhã?"

.BiologyClass {
  shirt-color:red;
}

Ou você pode atribuir regras a um aluno específico, chamando seu único ID :

"Jonathan Sampson usaria uma camisa verde amanhã?"

#JonathanSampson {
  shirt-color:green;
}
33
Sampson

Os IDs devem ser exclusivos, mas no CSS eles também têm prioridade ao descobrir quais das duas instruções conflitantes devem ser seguidas.

<div id="section" class="section">Text</div>
#section {font-color:#fff}
.section {font-color:#000}

O texto seria branco.

24
Oli

Um benefício adicional ao usar um ID é a capacidade de segmentá-lo em uma tag de âncora:

<h2 id="CurrentSale">Product I'm selling</h2>

Em algum outro lugar, você poderá acessar o link diretamente para esse local na página:

<a href="#CurrentSale">the Current Sale</a>

Um uso comum para isso seria atribuir a cada título de um blog um ID com carimbo de data (por exemplo, id = "date20080408"), o que permitiria segmentar especificamente essa seção da página do blog.

Também é importante lembrar que existem regras de nomeação mais restritas para os IDs, principalmente porque eles não podem começar com um número. Veja similar SO pergunta: Qual é um valor válido para atributos de id em html

6
Dave Rutledge

as classes são ótimas quando você deseja aplicar estilos semelhantes a muitos divs ou elementos diferentes. os IDs são bons quando você deseja endereçar um elemento específico para formatação ou atualização com javascript.

6
Mike Farmer

Algumas outras coisas a ter em mente:

  • Ao usar o ASP.Net, você não tem controle completo sobre a identificação dos elementos; portanto, é necessário usar a classe (observe que isso é menos verdadeiro do que era antes).
  • É melhor usar nem, quando você puder ajudar. Em vez disso, especifique tipo de elemento e é tipo dos pais. Por exemplo, uma lista não ordenada contida dentro de div com a classe navarea pode ser destacada desta maneira:

    div.NavArea ul { /* styles go here */ }
    

Agora você pode estilizar o divisão lógica para grande parte da sua navarea inteira com um aplicativo de classe.

3
Joel Coehoorn

O próprio padrão HTML responde à sua pergunta:

Dois objetos não podem ter o mesmo ID, mas uma quantidade arbitrária de objetos pode ter a mesma classe.

Portanto, se você deseja aplicar determinados atributos de estilo CSS a apenas um DIV, isso seria um ID. Se você deseja que certos atributos de estilo se apliquem a vários DIVs, isso deve ser uma classe.

Observe que você pode misturar os dois. Você pode fazer com que dois DIVs pertençam à mesma classe, mas dê a eles IDs diferentes. Em seguida, você pode aplicar o estilo comum a ambos à classe e as coisas específicas de qualquer um deles ao seu ID. O navegador aplicará primeiro o estilo de classe e, em seguida, o estilo de ID, para que os estilos de ID possam substituir o que uma classe tiver definido anteriormente.

3
Mecki

Os IDs devem ser exclusivos. CLASSES devem ser compartilhadas. Portanto, se você tiver alguma formatação CSS que será aplicada a vários DIV, use uma classe. Se apenas um (como requisito, não como casualidade), use um ID.

2
James Curran

Acho que todos sabemos o que é classe, mas se você pensa em IDs como identificadores, e não como ferramentas de estilo, não vai dar muito errado. Você precisa de um identificador ao tentar segmentar algo e, se tiver mais de um item com o mesmo ID, não poderá mais identificá-lo ...

Quando se trata de escrever seu css para IDs e CLASSES, é benéfico usar o mínimo de classes css o máximo possível e tentar não ficar muito pesado com os IDs até que você precise, caso contrário, você sempre procurará escrever declarações mais fortes e em breve teremos um arquivo css cheio de! important.

1
Steve Perks

Onde usar um ID versus uma classe

A diferença simples entre os dois é que, embora uma classe possa ser usada repetidamente em uma página, um ID deve ser usado apenas uma vez por página. Portanto, é apropriado usar um ID no elemento div que esteja marcando o conteúdo principal da página, pois haverá apenas uma seção de conteúdo principal. Por outro lado, você deve usar uma classe para configurar cores de linha alternadas em uma tabela, pois, por definição, serão usadas mais de uma vez.

Os IDs são uma ferramenta incrivelmente poderosa. Um elemento com um ID pode ser o destino de um pedaço de JavaScript que manipula o elemento ou seu conteúdo de alguma forma. O atributo ID pode ser usado como destino de um link interno, substituindo tags de âncora por atributos de nome. Por fim, se você tornar seus IDs claros e lógicos, eles poderão servir como uma espécie de "auto-documentação" dentro do documento. Por exemplo, você não precisa necessariamente adicionar um comentário antes de um bloco declarando que um bloco de código conterá o conteúdo principal se a tag de abertura do bloco tiver um ID, digamos, "principal", "cabeçalho", "rodapé "etc.

1
Konstantin Tarkus

Se você estiver usando controles da web .Net, às vezes é muito mais fácil usar classes, já que o .Net altera os IDs de div de controle da Web em tempo de execução (onde eles estão usando runat = "server").

O uso de classes permite criar estilos facilmente com classes separadas para fontes, espaçamento, bordas etc. Geralmente, uso vários arquivos para armazenar tipos separados de informações de formatação, por exemplo basic_styles.css para formatação simples em todo o site, ie6_styles.css para estilos específicos do navegador (neste caso, IE6) etc e template_1.css para obter informações de layout.

De qualquer maneira que você escolher, tente ser consistente para ajudar na manutenção.

0
Toby Mills

Além disso, um elemento ao qual você fornece um ID específico pode ser manipulado por meio de comandos JavaScript e DOM - GetElementById, por exemplo.

Em geral, acho útil atribuir um ID a todas as principais divs estruturais - mesmo que inicialmente não tenha regras CSS específicas para aplicar, tenho essa capacidade lá no futuro. Por outro lado, eu uso classes para os elementos que podem ser usados ​​várias vezes - por exemplo, uma div que contém uma imagem e legenda - eu posso ter várias classes, cada uma com valores de estilo ligeiramente diferentes.

Lembre-se, porém, sendo tudo igual, as regras de estilo em uma especificação de ID têm precedência sobre as de uma especificação de classe.

0
Ken Ray

Além de os IDs e as classes serem ótimos para definir o estilo de um item individual em comparação a um conjunto similar de itens, há também outra advertência a ser lembrada. Também depende do idioma até certo ponto. No ASP.Net, você pode inserir Div e ter IDs. Mas, se você usar um painel em vez do Div, perderá o ID.

0
CodeRot

Se for um estilo que você deseja usar em vários locais da página, use uma classe. Se você deseja muita personalização para um único objeto, digamos uma barra de navegação na lateral da página, um ID é o melhor, porque é provável que você não precise dessa combinação de estilos em nenhum outro lugar.

0
HitScan

id deve ser o identificador exclusivo do elemento na página, o que ajuda a manipulá-lo. Qualquer estilo definido externamente por CSS que deveria ser usado em mais de um elemento deve ir no atributo de classe

<div class="code-formatting-style-name" id="myfirstDivForCode">
</div>
0
Vinko Vrsalovic

Use um ID para um elemento exclusivo da página com o qual você deseja fazer algo muito específico e uma classe para algo que você possa reutilizar em outras partes da página.

0
Sam Meldrum

O atributo id é usado para os elementos identificá-los exclusivamente no documento, enquanto o atributo class pode ter o mesmo valor compartilhado por muitos elementos no mesmo documento.

Então, realmente, se houver apenas um elemento por documento que usará o estilo (por exemplo, #title), escolha id. Se vários elementos puderem usar o estilo, vá com class.

0
Mark Cidade

Eu diria que é melhor usar uma classe sempre que você achar que um elemento de estilo será repetido em uma página. Itens como HeaderImage, FooterBar e similares funcionam bem como um ID, pois você o usará apenas uma vez e ajudará a impedir que você duplique acidentalmente, pois alguns editores o alertam quando você tiver IDs duplicados.

Também posso ser útil se você deseja gerar os elementos div dinamicamente e deseja direcionar um item específico para formatação; você pode simplesmente fornecer o ID adequado na geração, em vez de procurar o elemento e atualizar sua classe.

0
Dillie-O

Para mim: Se usar classes quando eu fizer algo em CSS ou adicionar nome aos elementos e puder usar em todos os elementos em uma página.

Então, os IDs que eu uso para o elemento único

Ex:

<div id="post-289" class="box clear black bold radius">

CSS:

.clear {clear:both;}
.black {color:black;}
.bold {font-weight:bold;}
.radius {border-radius:2px;}
0
l2aelba

As classes são para estilos que você pode usar várias vezes em uma página; os IDs são identificadores exclusivos que definem casos especiais para elementos. Os padrões dizem que os IDs devem ser usados ​​apenas uma vez em uma página. Portanto, você deve usar classes para quando desejar usar um estilo em mais de um elemento em uma página e um ID quando desejar usá-lo apenas uma vez.

Outra coisa é que, para as classes, você pode usar vários valores (colocando espaços entre cada classe, à la "class = 'blagh blah22 blah'), enquanto que com os IDs, você pode usar apenas o ID por elemento.

Os estilos definidos para os IDs substituem os estilos definidos para as classes. Assim, as configurações de estilo de #uniquething substituem o estilo de .what se os dois entrarem em conflito.

Portanto, você provavelmente deve usar IDs para coisas como o cabeçalho, sua 'barra lateral' ou o que for, e assim por diante - coisas que aparecem apenas uma vez por página.

0
thesmallprint

Meu sabor preferido é usar a identificação de classe quando os estilos css são aplicados a várias divs da mesma maneira. Se a estrutura ou o contêiner for realmente aplicado apenas uma vez ou puder herdar seu estilo do padrão, não vejo razão para usar a identificação de classe.

Portanto, dependeria se sua div é uma de várias; por exemplo, uma div representando uma pergunta para uma resposta no site stackoverflow. Aqui você deseja definir o estilo para a classe "Answer" e aplicá-lo a cada div "Answer".

0
James Winans