Dynamically loading the CSS from different site collection

While working on a client project recently, I discovered that I needed to explore the option to load multiple CSS files from a different site collection, a Portal site. Additional site collections, in this case, are connected to the portal site to consume resources including lists and dynamically generated content. This is because there will be several hundred site collections created based on the same site template.  However, they will share the basic foundation CSS styles across sites. This gives them the ability to modify the CSS in the main portal site through SharePoint Designer and update/checkin and the changes will be reflected everywhere. This gives more agility/versioning rather than having to compile and deploy a WSP, or have the CSS files and other resources load from the layouts folder.
In order to change any specifics, I load an extra CSS file at the very end of the sequence. This customizes and overwrites any style the client wants. Having said that, when I used the ‘After’ property of the CssRegistration server tag to load these CSS files in order, I ran into many issues for example:

1. SharePoint server tags do not like server code <%…%>
2. The Link tag does not offer the After property so it will load whenever the server finds it
3. CSS files have to be loaded in a particular order to have the After property working correctly.

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

So in dealing with the pain of loading the CSS from a custom source (url), using CssRegistration soon became a challenge. After going through many options, what seems to have worked was adding the server side code to the head tag of the master page to override the CreateChildControls

<%
 protected override void CreateChildControls()
 {
 CssRegistration css = new CssRegistration

css.Name = SPUtility.ConcatUrls(Common.Settings.PortalSiteUrl, "style library/scss/portal.css")
 css.After = "foundation.css"
 Page.Header.Controls.Add(css);

css = new CssRegistration
 css.Name = SPUtility.ConcatUrls(Common.Settings.PortalSiteUrl, "style library/scss/overwrites.css")
 css.After = "portal.css"
 Page.Header.Controls.Add(css);
 }
 %>

The CssRegistration server code used above to load the CSS files does not work correctly in combination with the CssRegistration server tag if you want to use After property. This is because the server code will be run at the time of controls creation.  Whereas the SharePoint:CssRegistration server tag will load when it’s found on the page. To address this issue I had to convert all the CSS registrations into server side code for loading css files. In other words, you can use the code sample above to load the CSS files dynamically or you can use CssRegistration server tags to load static CSS but you cannot combine the two because it will result in changes to the sequence in which the CSS files are loaded.
Hope this will be of help to many who are looking of ways to loading the CSS from different url.