Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Code Optimization Query

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #40576
    ToxicFire
    Participant

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

    #113196
    TheDoc
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.