Closed Bug 667119 Opened 12 years ago Closed 9 years ago

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


( Graveyard :: Performance, defect)

Not set


(Not tracked)



(Reporter: openjck, Unassigned)


(Whiteboard: [triaged])

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.
of course!
Thanks! Copying...

Luke: I'm bring over CSS (and JS) from 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.

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.
Assignee: lcrouch → nobody
Priority: -- → P4
Blocks: 756266
No longer blocks: 756266
Blocks: 756266
Version: Kuma → unspecified
Component: Website → Landing pages
No longer blocks: 756266
Component: Landing pages → Performance
Priority: P4 → --
Whiteboard: [u: developer] [c: ]
Target Milestone: 1.0 alpha → ---
Done with the redesign.
Closed: 9 years ago
Resolution: --- → FIXED
Whiteboard: [triaged]
Product: → Graveyard
You need to log in before you can comment on or make changes to this bug.