0

Como posso melhorar a semântica desse código em css.

Ex: Criei duas div's com atributo display:none; e quando passar o mouse em uma div pai essas div's deveram habilitar-se.

.acaoBaixar, .acaoView {  
    display: none;

}

Quero melhorar esse código abaixo.

/*habilita as div-s  */

.file:hover .acaoBaixar {   
    display: block; 
}
.file:hover .acaoView { 
    display: block; 
}
1
  • Poste a estrutura html também. Commented 17/03/2016 às 15:57

1 Resposta 1

0

Não entendo o que quer dizer com "semântica", o seu código é minimo e apresenta algo simples, a unica modificação que eu faria é que se .acaoBaixar e .acaoView tem o mesmo efeito CSS, então .file:hover .acaoBaixar e .file:hover .acaoView também devem ter, ou seja não tem porque criar duas regras assim:

.file:hover .acaoBaixar {   
    display: block; 
}
.file:hover .acaoView { 
    display: block; 
}

Faça apenas uma:

.file:hover .acaoBaixar, .file:hover .acaoView { 
    display: block; 
}

Pois assim se precisar mudar algo você só mudará em um lugar.

Outra coisa se usar isso em um lugar:

.subClasse

E isso em outro:

.classe .subClasse 

Você poderá ter problemas com a regra que "tiver preferencia", tente manter a mesma regra, a não ser que .subClasse (no exemplo) seja usado fora de .classe, então o final ficaria assim:

.file .acaoBaixar, .file .acaoView { 
    display: none;
    //...Resto do CSS
}

.file:hover .acaoBaixar, .file:hover .acaoView { 
    display: block; 
}

Procure também deixar todas regras na classe principal e não no hover quando usar apenas display: block; no hover. Não faz muita diferença, é mais por uma questão de organização.

1
  • 2
    Entendi!! É Isso mesmo que eu estava tentando implementar, deixar o código menos repetitivo. muito obrigado! Commented 17/03/2016 às 16:13

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .