Shubhie Panicker: CSS module system in Google+

Shubhie Panicker

While module systems like AMD and CommonJS have become common place for Javascript, CSS has been lagging behind.

Why modular CSS? In large scale apps managing CSS dependencies is cumbersome. Lack of granular CSS deps leads to pulling in unnecessary CSS on page render causing bloat. When refactoring code, the CSS order can change disfiguring the rendered page. Also, since it’s hard to know which CSS effects which parts of the page, all of the CSS is bundled together and downloaded at initialization, so the initial page load time is slowed down.

This talk describes the CSS dependency system in Google+. It improves end user latency by initially loading only a small set of CSS, and late loading CSS modules, as needed. It improves maintainability, making refactoring easier. Finally, the dependency system enables packaging HTML, CSS and Javascript together into distinct UI elements for reusability, and fewer wiring points boost developer productivity.

Video Video Video