CSS Load order

I have several different css files my template needs to load. I have created a cssLoadOrder.xml, and its in my themes Global folder. However, when I'm previewing the template, it loads the stylesheets in a different order.

My XML

<?xml version="1.0" encoding="utf-8" ?>
<cssFiles>
    <file>reset.css</file>
    <file>jquery-ui.css</file>
    <file>jquery-ui.theme.css</file>
    <file>layerslider.css</file>
    <file>slick.css</file>
    <file>animate.css</file>
    <file>style.css</file>
</cssFiles>

What the preview HTML outputs

<link href="/Telerik.Web.UI.WebResource.axd?compress=0&amp;_TSM_CombinedScripts_=%3b%3bTelerik.Sitefinity.Resources%2c+Version%3d7.0.5100.0%2c+Culture%3dneutral%2c+PublicKeyToken%3dnull%3aen%3a30c67b5a-b8cd-4dd5-8715-843d20404812%3a7a90d6a%3a83fa35c7" type="text/css" rel="stylesheet" /><link href="/Sitefinity/Public/ResponsiveDesign/layout_transformations.css?unique_key=cd1d387e-a970-430f-bdb5-d395f85ed4a5" type="text/css" rel="stylesheet" /><link href="/Sitefinity/WebsiteTemplates/FritoLay/App_Themes/FritoLay/global/style.css?v=635404301239353694" type="text/css" rel="stylesheet" /><link href="/Sitefinity/WebsiteTemplates/FritoLay/App_Themes/FritoLay/global/animate.css?v=635404269873538325" type="text/css" rel="stylesheet" /><link href="/Sitefinity/WebsiteTemplates/FritoLay/App_Themes/FritoLay/global/jquery-ui.css?v=635404269848110162" type="text/css" rel="stylesheet" /><link href="/Sitefinity/WebsiteTemplates/FritoLay/App_Themes/FritoLay/global/jquery-ui.theme.css?v=635404269850762179" type="text/css" rel="stylesheet" /><link href="/Sitefinity/WebsiteTemplates/FritoLay/App_Themes/FritoLay/global/layerslider.css?v=635404269853414196" type="text/css" rel="stylesheet" /><link href="/Sitefinity/WebsiteTemplates/FritoLay/App_Themes/FritoLay/global/reset.css?v=635404269855286208" type="text/css" rel="stylesheet" /><link href="/Sitefinity/WebsiteTemplates/FritoLay/App_Themes/FritoLay/global/slick.css?v=635404269857626223" type="text/css" rel="stylesheet" /></head>

They are mostly alphabetical, however style.css is first. I did not use Thunder, or any SDK to create this theme as I am working on OSX. However, I went through admin->settings->advanced->frontend themes and registered my theme, and I can apply it to templates. Is there something I need todo for SiteFinity to reload the cssloadorder? Does SiteFinity cache it or anything?

Also, I have an external CSS file I need to load - can I tell cssLoadOrder.xml to load remote css files?

Hello Nathan,

We have answered you in the support ticket. However, I share the ticket reply to the community.
Regarding the css order xml, it should be verified that the themes are located correctly in the project root, they should be in
~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Themes
and the .xml order file should be in the following location:
~/App_Data/Sitefinity/WebsiteTemplates/YourTemplate/App_Themes/MyTheme/Global/cssLoadOrder.xml and containing all files order. In order an external css to be loaded by the loadOrder it should be in the same folder - the Global folder of the Website theme.

Regards,
Nikola Zagorchev
Telerik