667119 - Break CSS into multiple files and only load necessary files on each page

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Performance, defect)

Description

[John Karahalis [:openjck]]

Craig and Luke recently discussed the possibility of breaking CSS into multiple files by site section (homepage, Demo Studio, Dev Derby, etc.), with each section loading only the stylesheets it needs.

Craig and Luke: Would it be alright if I post your email conversation here? You guys made some really interesting points.

Comment 1

[Luke Crouch [:groovecoder]]

of course!

Comment 2

[John Karahalis [:openjck]]

Thanks! Copying...

Luke: I'm bring over CSS (and JS) from http://isithackday.com/wheresmozilla/ into mdn. Do you prefer I make a new mdn-calendar.css or just add it to mdn-screen.css? In production it will all be squished into mdn-min.css but I'd like to stick with whatever file layout you like.


Craig:
That's a good question... I'd say put all the calendar styles in their own sheet.

I've been moving toward breaking up CSS files for different sections, like all the demo stuff in one file, the dev derby stuff in another, etc., just to make it somewhat more modular and easier to maintain.

A potential benefit of separate style sheets is that we wouldn't have to load a bunch of extra rules on pages where they're not used. E.g. there's no reason the home page needs to load the 120+ style rules for Dev Derby, and no reason for the Dev Derby page to load the 100 rules that only ever get used on the home page. Obviously that's defeated when everything gets squished into one minimized file anyway.

So I've been thinking in some future release we might work on keeping styles separate and only calling them on pages where they're needed. We'd get the benefit of smaller style sheet but add more http requests so we'd need to see which is the worse performance hit. It might be that the extra request still performs better on most pages than loading an extra 30k of CSS we don't need to load for that page.

I dunno, something to think about.

Comment 3

[David Walsh :davidwalsh]

Done with the redesign.