Forums

WhyDoINeedToSignUp

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!

HugoGiraudel

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)

WhyDoINeedToSignUp

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!

treehouse : what would you like to learn today?

Forums

Multiple files vs. multiple media queries