Improve css code

Question

How can I improve the semantics of this code in css.

Ex: I created two div’s with display:None attribute; and when passing the mouse on a parent div those div’s should qualify.

.acaoBaixar, .acaoView {  
    display: none;

}

I want to improve this code below.

/*habilita as div-s  */

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

Answer 1

I do not understand what you mean by "semantics", its code is minimal and presents something simple, the only modification I would do is that if .acaoBaixar and .acaoView has the same CSS effect, so .file:hover .acaoBaixar and .file:hover .acaoView should also have, ie has no reason to create two rules like this:

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

Make just one:

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

'Cause then if you need to change something you’ll only change in one place.

Another thing if you wear it somewhere:

.subClasse

And that in another:

.classe .subClasse 

You may have problems with the "have preference" rule, try to keep the same rule, unless .subClasse (in the example) be used outside of .classe, then the end would be like this:

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

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

Also try to leave all rules in the main class and not in the Hover when using only display: block; in Hover. It doesn’t make much difference, it’s more about organization.