How to combine authorable css files in css.txt in aem

Question

We have an existing AEM application where there are 100s of pages. On most of the pages, different css files are getting loaded via a separate network call. We need to optimize this. What I am thinking is if we can: 1. Author the list of css files on the page as a page property. 2. In our code, this page property is read and all the css files mentioned as a property value get combined and rendered on the page. Similar to what is done in css.txt file or embed property. Please suggest.

Answer 1

Their are few ways to reduce the network calls for css files in AEM 1) Add the css files at the template level so that all the css files are loaded once.

2) Instead of adding the category of the clientlibs use the embed property of the clientlibs. AEM will combine all the clientlibs provided in the embed property into a single clientlib and their will be only network call. But the size of the css file may increase after combining and it will effect the page load time for the first time.

But if your requirement is to author the css files then I will suggest you have a dropdown kind of property in your dialog where all your css files are displayed and the author can select the css according to the need. Once selected then you can apply those css to the html by reading through sightly.

Answer 2

So, it seems you don't want to or cannot use the clientlib functioanlity which is an ootb AEM feature.

No matter what solution you choose - maybe a frontend JavaScript snippet that can decide which CSS files would be needed, or some logic that builds CSS includes at render time based on the components used in the page, or something completely different - I would strongly suggest not to put the CSS files to be used in the editor's responsibility.

If they need some additional styles to be set, use the Adobe Style System. But do not abuse page properties for CSS file configurations.

I mean "hundreds of pages" sounds like a rather small site, but it might still increase your maintenance efforts a lot, when the first people start to complain about wrong colors or font sizes...