Grow your CSS skills. Land your dream job.

Responsive CSS, best code technique, override css rules?

  • # January 29, 2013 at 9:37 am

    Hey,

    today i ran in a question and now i want to read your comments about my “problem”.

    I’m creating a new responsive website. The design contains several boxes with fixed widths and heights. To understand my problem i have two code snippets.

    Snippet 1:

    @media only screen and (min-width: 320px) {
    .box {
    float: left;
    width: 100px;
    }
    }
    @media only screen and (min-width: 480px) {
    .box {
    width: 200px;
    }
    }
    @media only screen and (min-width: 960px) {
    .box {
    width: 300px;
    }
    }

    Snippet 2:

    @media only screen and (min-width: 320px) {
    .box {
    float: left;
    }
    }
    @media only screen and (min-width: 320px) and (max-width: 479px) {
    .box {
    width: 100px;
    }
    }
    @media only screen and (min-width: 480px) and (max-width: 959px) {
    .box {
    width: 200px;
    }
    }
    @media only screen and (min-width: 960px) {
    .box {
    width: 300px;
    }
    }

    So is it better to just override classes or keep them only relevant for their screensize. What advantages do I have, what disadvantages?
    Just add some to the list.

    **Snippet 1 – Advantages**
    - sometimes less code

    **Snippet 1 – Disadvantages**
    - I can’t remove for example the width:200px to reset the box, I have to write something like auto or 100%

    **Snippet 2 – Advantages** (I don’t repeat snippet 1′s disadvantages)
    - sometimes cleaner separation of the different sizes

    **Snippet 2 – Disadvantages** (I don’t repeat snippet 1′s advantages)

    I’m really curious what your answers will be…
    Cheers

    # January 29, 2013 at 9:57 am

    I work my way up – so similar to your example 1.

    In this way I only need to alter styles which need to alter as the screen size grows.

    I see this as an extension of the cascade so styles flow up the screen sizes until over-written with something more specific – i.e. based on a relevant media query.

    But – if I have a style which I only want for the smallest screen size for example then I will limit it with a max-width query but I never use min-width= & max-width= type queries – I’ve never found I needed them.

    I don’t think any one approach is “better” though – it is up to you which you find easiest to work with.

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

You must be logged in to reply to this topic.

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