Grow your CSS skills. Land your dream job.

Code Optimization Query

  • # November 2, 2012 at 1:20 pm

    Just a quick query out of the following two code snippets which would be the most optimal. Assuming minification, file size for the second win’s, but i wonder how it would affect rendering time and which would come out on top, (yuh i know its probably insignificant, just wondering)

    .codesegmentA { padding-bottom: 10px; }
    .codesegmentB { padding-top: 20px; }
    .codesegmentC { background: #222; }

    @media only screen and (max-width: 479px) {
    .codesegmentA { padding: 0; }
    .codesegmentB { padding: 0; }
    .codesegmentC { background: #fff; }
    }

    Or

    @media only screen and (min-width: 480px) {
    .codesegmentA { padding-bottom: 10px; }
    .codesegmentB { padding-top: 20px; }
    }
    .codesegmentC { background: #222; }

    @media only screen and (max-width: 479px) {
    .codesegmentC { background: #fff; }
    }

    # November 2, 2012 at 2:39 pm

    You also need to consider readability. I’d say #1 is much better for readability. You could even condense it further like this:

    @media only screen and (max-width: 479px) {
    .codesegmentA, .codesegmentB { padding: 0; }
    .codesegmentC { background: #fff; }
    }

    # November 2, 2012 at 3:02 pm

    hah I slipped up there, writing out code for the question, i should have made .codesegmentB alter something like border-width or margin instead so that they couldn’t be merged with .codesegmentA when been zero’d, my bad. As for readability, Yuh its much cleaner, though deployed code is minified so not as super high issue as im the only one working with it.

    It was more of a question of are their any extra overheads in page rendering by having the codesegment A & B in #1 outside of a media query therefore the defacto default for those classes and having to zero them inside the media query(browser applies the adjusted value first then overrides it with the zero’ed value), Versus in #2 having the codesegment A & B set only within a mediaquery, therefore not needing to zero them in the later media query. Because if there aren’t and your ignoring readability file size becomes the priority for optimization.

    Sorry about the wall of words.

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