19

I'm trying to make my front-end design process more modular, and am exploring webpack. It supports a style loader, which allows you import a css file and inject it in the document like so:

require("style/url!file!./file.css");
// => add a <link rel="stylesheet"> to file.css to document

However, my main focus is on websites and not webapps1, so it feels weird to add the css through javascript. But I might just be old fashioned, so I'm wondering: is the loader meant to be used for all css, or is it only meant to load small, conditional parts of css?

And if it can be used for loading all css, would there be any penalties when using a webpack generated bundle.js to inject the css as opposed to directly linking a css file in the html? Besides it obviously breaking if javascript isn't enabled?

1: The difference being that I have very little dynamic content, javascript plays only a minor role in these websites, and that I'm not routing with javascript but have static .html files for pages

Improve this question
2
  • There is a way to separate the css into a separate file btw: webpack.github.io/docs/stylesheets.html#separate-css-bundle Commented Aug 25, 2014 at 10:55
  • CSS loaded through javascript would take longer to load as well Commented Sep 10, 2014 at 17:01

1 Answer 1

Reset to default
15
+25

Where possible, include CSS with the HTML itself. Modern browsers will begin fetching the CSS as the page is parsing, sometimes before the JavaScript has even begun to download. You're going to get an improvement in page rendering speed doing major pieces outside of a loader.

Additionally, if you stick to a major "core" style, you can benefit from caching, which will again load faster than JavaScript can.

http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/

In your example, I've done it by splitting it into multiple pieces and using loaders & bundlers for the specific elements I've got loaded in the page. The application look & feel, branding, etc is loaded from markup, and the behavior that controls my specific UI (say, layout for a particular form) is done with a bundler or packer.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Chrome and Firefox 50+ both download CSS and JS at the same time.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.