Grow your CSS skills. Land your dream job.

Multiple files vs. multiple media queries

  • # February 21, 2013 at 3:41 am

    Hi all, hoping to get a general steer on what people would consider the best approach.

    In short, I’m working in a large team about to deliver a front-end dev project consisting of many-many components. To do this we are trying to consider the best structure for our work. As the components will form a site that is responsive would you suggested:

    **Option A:**

    Separating each components CSS into a single file with multiple media queries.

    + The positive is that all the CSS for that component will be in one file.

    – The negative side to this approach is that if each component CSS file could have X media queries (e.g.: mobile, tablet, desktop), the concatenated/compressed ‘master’ CSS file would result in possibly hundreds of media queries.

    **Option B:**

    Separating each components CSS into multiple files based on the media query.

    + The positive is that each could be concatenated/compressed into the correct ‘master’ CSS media query meaning that only 1 media query per-break-point would be required.

    – The negative is that you would end up with X number of CSS files per component (possibly hundreds in total).

    **Option C:**

    Something I’ve missed?

    Option B is what I’m leaning towards. Despite resulting in lots of CSS files for the components, it does result in the best end-goal and would also have the benefit of better control/management for a large team working with Git/SVN.

    Thanks for your thoughts!

    # February 21, 2013 at 4:21 am

    I would definitely go with Sass, with a structure like this:

    /* Helpers – helpers.scss */
    @mixin breakpoint($point) {
    @if $point == large{
    @media (max-width: 58em) { @content; }
    }
    @if $point == medium {
    @media (max-width: 48em) { @content; }
    }
    @if $point == small {
    @media (max-width: 38em) { @content; }
    }
    }

    /* Component 1 – component1.scss */
    .component-a {
    /* stuff */
    @include breakpoint(small) { /* stuff */ }
    @include breakpoint(medium) { /* stuff */ }
    @include breakpoint(large) { /* stuff */ }
    }

    /* Component 2 – component2.scss*/
    .component-b {
    /* stuff */
    @include breakpoint(small) { /* stuff */ }
    @include breakpoint(medium) { /* stuff */ }
    @include breakpoint(large) { /* stuff */ }
    }

    /* Main stylesheet – styles.scss */
    @import “helpers”, “component1″, “component2″;

    Thanks to this method:
    * You handle **one .scss file per component**, which seems good for maintainability
    * You handle **media queries inside each file**, so everything regarding a component is in the same file
    * You handle **media queries in a very easy way** (no value, only keywords)
    * You **can change the value of your breakpoints** whenever you want
    * In the end you have **one single .css file** with **only 3 media query calls** (small, medium and large)

    # February 21, 2013 at 4:26 am

    Thanks Hugo!

    I have been using SASS but not to that level yet. I didn’t realize it would output only 3 media queries in that way.

    I will take a closer look, thanks!

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