Forums

Give help. Get help.

  • # 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; }
    }

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag