#css modules

[dragoni]

CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components

[codewithnazam]

How to Enable and Using CSS Modules | Learn React Part 5.7

In this video we are going to enable css module in our #webpack configuration file please watch carefully to understand how to using css modules.. Social Med...

[dragoni]

[CSSconf.eu 2013] Shubhie Panicker - CSS module system in Google+

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

Slides: https://docs.google.com/presentation/...

What tool(s) is Google using to create a site wide CSS dependency graph?

incrementally load CSS with dependencies

rely on cascading styles instead of specificity

Google uses Sass with Closure Stylesheets and Closure Templates