Best Practices: Multiple Classes or Multiple Properties?

[siouxfan45]

I’m curious what the best practice is when multiple classes need the same property.

For example, let’s say I have three divs with distinct properties…

#menu { font-size: 1em; background:blue; height:50px; display:inline }
#wrap { font-size:2.5 em; background:red; display:block }
#footer { font-size:1.5 em; background:purple }

…but I have decided that they both need a matching width of 500px. Which of the following would be the best practice?

Option 1

#menu { width:500px; font-size: 1em; background:blue; height:50px; display:inline }
#wrap { width:500px; font-size:2.5 em; background:red; display:block }
#footer { width:500px; font-size:1.5 em; background:purple }

Option 2

#menu, #wrap, #footer { width:500px }
#menu { font-size: 1em; background:blue; height:50px; display:inline }
#wrap { font-size:2.5 em; background:red; display:block }
#footer { font-size:1.5 em; background:purple }

[Paulie_D]

I wouldn’t be putting widths in multiple element selection.

In the event that you need to change one, you’d have to make a new selector / CSS declaration anyway.

Frankly, if these are all elements one after another, I would be adding a proper wrapping element and assign the width to that. I prefer divs just to be their default of 100% wide unless there is a reason to chnage it.

[croydon86]

Definitely option 2.

Less repetition = Less code = Smaller CSS file (albeit very small difference)

Not the most important thing to do, but every little helps, especially if not too taxing. I wouldn’t go through the whole CSS and group similar properties though, that would just be crazy

[Author]

Posts