Forums

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

Home Forums CSS Media Queries mixins in SCSS – Which approach for Mobile-first CSS? Re: Media Queries mixins in SCSS – Which approach for Mobile-first CSS?

#128681

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