Encontre o meio termo. Não faça seletores muito específicos ou seletores muito genéricos. O CSS trabalha com especificidade: quanto mais específico, mais certeiro você é ao capturar um elemento, mas seu CSS fica mais engessado e consequentemente você usa mais código. Quanto mais genérico, mais elementos do mesmo tipo você formata, mas o risco de conflito de estilos aumenta. O ideal é encontrar o meio termo, onde você é tão específico e nem tão genérico. (Tabless)
Por exemplo:
.container #box pPoderia ser substituído por:
#box pPois a class .container é desnecessária neste caso.
- IDs são como âncoras.
- Utiliza-se mais como âncora para o JS e como indentificador de conteúdo.
- Dê preferência para o uso de classes que torna o código mais reutilizável, por exemplo.
I. Estilos inline II. IDs III. Classes, pseudoclasses e atributos IV. Elementos e pseudoelementos
- Em caso de empate, ganha estilo cascata
!importantsempre tem maior prioridade- conflito de
!importante, ganha o!importanteestilo cascata
- ID - ex: #id
- Classe - ex: .classe
- Tipo - ex: h1
- Irmão adjacente - ex: h1 + p
- Filho - ex: li > ul
- Descendente - ex: h1 p
- Universal - ex: *
- Atributo - ex: [type="text"]
- Pseudo classe/pseudo elemento - ex: a:hover