0

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?

Tatu Ulmanen
  • 123,288
  • 34
  • 187
  • 185
bellyass
  • 13
  • 3

3 Answers3

1

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).

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86
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.

Madara's Ghost
  • 172,118
  • 50
  • 264
  • 308
0

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

Community
  • 1
  • 1
JMax
  • 26,109
  • 12
  • 69
  • 88
  • If I would use a class for this how should it be called? .bg-light-green? I have learned to avoid names like this. – bellyass Aug 12 '11 at 12:21
  • in this particular case, it might not be a good idea. what i meant is you have to take into account the whole styling of your HTML in order to reduce this kind of statement. Meaningly, where do you want to have *light-green*? can you set the style on a parent element? is there anyway to refactor the **common** parts of your style (and not only light-green)... This kind of css statement is hard to refactor and maintain, especially if you have many of these – JMax Aug 12 '11 at 12:25
  • This color is used for many Elemnts at completely different locations in Magento. Some Elements are part of the layout-frame and some others are just hover states of buttons or list-items. This causes the quantity of different selectors. Just the color is the same every time. – bellyass Aug 12 '11 at 12:49
  • ok, i understand. Believing Jason answer, you should group styles, i think that's the best way to deal with your case – JMax Aug 12 '11 at 13:06