Styles in Eleventy (Again)

I have written about how I load styles on this website in the past. I have recently revisited this approach, came up with new questions, new answers and learnt things along the way. I thought this would warrant an article. What’s so difficult anyway? Eleventy has some documentation on how to load styles. A clever approach is to leverage Eleventy as a generator, and have a Liquid template output to a CSS file. Include all your different styles inside that template, and you get one master stylesheet with everything in it — easy peasy. --- permalink: /assets/css/bundle.css --- {% include "header.css" %} {% include "footer.css" %} {% include "./node_modules/my-fictitious-package-name/package.css" %} There are a few things I don’t like about this approach: This ends up loading all the styles, regardless of whether they’ll be used at all. Home showcase, CodePen wrappers, resume layout, blockquote, code blocks… Everything goes, even if only a fraction of them are needed on a given page. It…