Question

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: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?

Answer 1

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.