Grow your CSS skills. Land your dream job.

Best Practices: Multiple Classes or Multiple Properties?

  • # May 1, 2013 at 10:11 am

    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 }

    # May 1, 2013 at 10:22 am

    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.

    # May 1, 2013 at 2:44 pm

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".