Is avoiding duplicate declarations considered good practice in this case?
Is it recommended to combine equal declarations in CSS in order to reduce the filesize and avoiding duplications?
For Example:
#topbar,#searchbox.focus,#usermenu li:hover a,#cart-flyout-table tbody td,.btn_remove开发者_Go百科:hover,#heading-warenkorb a:hover,.button:hover span,.input-text:focus,#pages li a:hover,select:focus,.picture-overview li:hover,#category-sub li a:hover {background-color:#e3eed3}
Is it recommended to do this for some other Properties which are used very often like float,text-align or padding for example?
The Code would getting harder to read and edit but if this will be done only for the most common properties I would accept it. What's about the performance at the rendering? Would it make my website faster or slower?
The answer is: varies.
In general, I would only recommend on doing that when the elements in question are similar in content or in area. I'll explain.
let's say you have a sidebar, and that sidebar has several headlines in it, which you wish to have similar stylings. That's perfectly acceptable to use aside h1, aside h2, aside h3 { font-weight: normal; color: blue; }
.
However, to use it the way you described, for a 100 different elements on different parts of the page, then I won't recommend it.
I would avoid the type of CSS styling you mentioned.
It makes your stylesheets much harder to read and update.
Instead, I would group styles according to sections of the page
nav
, header
, content
, etc.
or by actions
form
, call to actions
, etc.
or a combo of both.
If you see some duplication within those categories, then combining would be fine.
Otherwise, for example, if you want to update one a
, you may need to look in four or more different places (for link, active, visited, and hover).
i can't see any problem in combining declaration.
Yet, if you want to apply the same style to your whole page, you'd better considering calling body { }
or * { }
.
Details to choose between these two are described here: difference between body and * in css
You may also consider using classes or css inheritance to avoid so many combination
精彩评论