CSS - selecao por id, classe, elemento?

28/03/2015

0

Sobre os tipos de seleções "seletores CSS": id, classe e elemento, quais deles são os melhores, mais utilizados, considerados padrões para o desenvolvimento web atual?
Gabriela Monte

Gabriela Monte

Responder

Post mais votado

28/03/2015

Gabriela, melhor explicação que achei, bem simples de entender mesmo

[url]http://guilhermemuller.com.br/pt/elearning/html_css_basico/licao/2/sintaxe-seletores-css[/url]

Marcelo Pastore

Marcelo Pastore
Responder

Mais Posts

28/03/2015

Marisiana Battistella

Gostei do artigo Marcelo!!
Responder

29/03/2015

Marcelo Pastore

Gostei do artigo Marcelo!!


É ótimo esse artigo, bem simples.
Responder

29/03/2015

Marisiana Battistella

Sim =) é explicativo e já tem os exemplos práticos. Fácil de entender!
Responder

29/03/2015

Marcelo Pastore

Sim =) é explicativo e já tem os exemplos práticos. Fácil de entender!


Pena o site não ser dedicado a esses artigos, não achei mais nada nele, se tivesse mais artigos do tipo seria melhor.
Responder

29/03/2015

Gabriela Monte

Já ajudou bastante.
Responder

30/03/2015

Thiago Santana

Legal o artigo!
Eu costumo utilizar o id para seletores
Responder

30/03/2015

William

Não é minha área, mas trabalhei com um cara especialista em desenvolvimento Front-End, ele sempre dizia que preferia usar classes pois poderia usar várias na mesma TAG para reaproveitar estilos e flexibilizar o código.

Podemos ver um pouco disso no bootstrap!
Responder

30/03/2015

Thiago Santana

Não é minha área, mas trabalhei com um cara especialista em desenvolvimento Front-End, ele sempre dizia que preferia usar classes pois poderia usar várias na mesma TAG para reaproveitar estilos e flexibilizar o código.

Podemos ver um pouco disso no bootstrap!


Também entendo muito pouco!
Mas as classe são as melhores saídas, pois se torna reutilizáveis.
Responder

30/03/2015

Gabriela Monte

Eu vendo varios exemplos, id e classes são mais utilizadas.
Responder

30/03/2015

Marcelo Pastore

Não é minha área, mas trabalhei com um cara especialista em desenvolvimento Front-End, ele sempre dizia que preferia usar classes pois poderia usar várias na mesma TAG para reaproveitar estilos e flexibilizar o código.


Concordo, o uso de classes se torna mais completo.
Responder

30/03/2015

Jothaz

O que o William postou procede, Class deixa o código dinâmico e podem ser reutilizadas em outros controles.

Claro que tudo depende do cenário, e as vezes pode-se utilizar Id sem problemas.

Quem esta desenvolvendo define o que é melhor de se utilizar levando-se em conta o conhecimento do projeto como um todo.

Não se pode ser maniqueísta e simplificar em certo ou errado e sim levar-se em conta as boas práticas.
Responder

30/03/2015

Thiago Santana

Muitas vezes precisamos de algo específico para um determinado componente!
Então se faz necessário o uso de ID, isso vai variar muito...
Responder

30/03/2015

Marcelo Pastore

Senhores, eu estou por fora, mas podem me citar exemplos praticos em quais momento devemos utilizar um ou outro?

Obrigado
Responder

31/03/2015

Jothaz

Senhores, eu estou por fora, mas podem me citar exemplos praticos em quais momento devemos utilizar um ou outro?

Obrigado


É dificil e eu não gosto de abordar temas ditando regras, como foi dito, tudo depende do cenário e da abstração/compreensão de quem esta desenvolvendo.
A regra é não ter regras, mas bom senso e compreensão de onde quer se chegar.

Por serem dinâmicas e reaproveitáveis as classes são consideradas como uma boa prática.
Agora dependendo do que você esta desenvolvendo e do resultado esperado pode-se usar o ID.
Uma utilização do ID poderia ser nos controles de cabeçalho e rodapés, o que garantiria que somente eles seriam afetados pele CSS.
Claro que poderia ser classes, mas se você preferir usar ID é um gosto pessoal e não podeira ser considerado erro.

Um cenário para o uso de ID, que talvez melhore a compreensão, seria:

minha_div {
    height: 200px;
    width:  200px;
}

cor_ativo {
    background-color: green;
}

cor_inativo {
    background-color: gray;
}

cor_atrasado {
    color: rede;
}

#destaque {
    border: 10px 10px 10px 10px;
}

<div id="controle1" class="minha_div cor_ativo"></div>
<div id="controle2" class="minha_div cor_inativo"></div>
<div id="controle3" class="minha_div cor_ativo cor_atrasado"></div>
<div id="destaque" class="minha_div cor_ativo"></div>


No cenário acima todos os controles herdam de "minha_div".
O "controle1" herda de "minha_div" e "cor_ativo".
O "controle2" herda de "minha_div" e "cor_inativoativo".
O "controle3" herda de "minha_div", "cor_ativo" e "cor_atrasado".
O "destaque" herda de "minha_div", "cor_ativo" e por ter o ID somente ele herda de "#destaque".

Vejo algumas repostas argumentando que por uma abordagem ser a mais utilizada nos sites e nos pretensos tutoriais seria a "correta".
Cuidado com este tipo de argumento, nem sempre o que é mais usado é o correto.
As vezes é mais usado simplesmente porque ninguém se deu ao trabalho de questionar ou aprender o conceito corretamente.

O argumento pode até ser "normalmente é a a abordagem mais utilizadas em grande sites ou site realmente profissionais".

Lembre-se durante muito tempo para a grande maioria era válido: a teoria heliocêntrica, a teoria da geração espontânea e até ingerir larvas de soiltarias (tênia) era considerado remédio para emagrecer.

Então tenham sempre um senso critico e inquiridor!


Deu uma luz?
Responder

31/03/2015

Thiago Santana

Boa Jothaz!
Exatamente isso...
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar