Improve css code [closed]

Question

Improve css code [closed]

Navigation

#1 by (0 votes)

0

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

Ex: I created two div's with display attribute: none; and when passing the mouse on a parent div these div's should be enabled.

.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; 
}

css

asked by anonymous 17.03.2016 / 16:36

1 answer

Update by json does not recognize UTF8 by database Generate Url through form

score 0 · Accepted Answer

I do not understand what you mean by "semantics", your code is minimal and it shows something simple, the only modification I would make is that if .acaoBaixar and .acaoView has the same CSS effect, then .file:hover .acaoBaixar and .file:hover .acaoView must also have, ie you do not have to create two rules like this:

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

Just make one:

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

So if you need to change something you will only change in one place.

Another thing to use in one place:

.subClasse

And this in another:

.classe .subClasse

You may have problems with the rule that "prefers", try to keep the same rule, unless .subClasse (in the example) is used outside .classe , then the end would look 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 hover when using only display: block; in hover. It does not make much difference, it's more for the sake of organization.