Media Queries mixins in SCSS – Which approach for Mobile-first CSS?

[Alen]

I’m not quite sure I’m understanding your concerns. What exactly are you trying to solve with a SASS mixin that would help you write better media queries?

> for mobile websites, all media query content would be all over the place

In the previously linked 320andup template, all the files are [compiled into one singular CSS file](https://github.com/malarkey/320andup/blob/master/scss/320andup-scss.scss). The base style is what get’s delivered to every mobile device, then as the view-port increases, you alter you design in the appropriate SASS break point file. To me this makes more sense, so if you need to make any changes or your design is not quite right at certain break point you know exactly where to go to make changes. How is this all over the place?

[croydon86]

Never mind! You seem to have misunderstood this post, and this is no longer a concern.

In short, we agree on the same thing.

[Historical Forums User]

> If you had a 3000 line CSS stylesheet, and needed 500 of those lines instantly, would you put those at the top of the stylesheet? Would the styles be applied once the whole stylesheet has downloaded, or do the styles get applied progressively as the file gets downloaded?

From my understanding the entire stylesheet is loaded and then evaluated by the browser. The evaluation process is different from browser to browser, but every style in your css is evaluated before the paint process. This is what makes media queries so effective, there is no time wasted in recalculating the layout. All styles in the stylesheet are calculated in the original layout calculation (this assumes one CSS file). Unlike JavaScript where the layout may be recalculated multiple times before paint.

So in short moving your media queries will not have noticeable (if any) affect on you page paint speed.

[Author]

Posts