The loadCSS library developed by Filament Group is widely recognized as the standard for asynchronously loading CSS. Even Google recommends its use. However, instead of using this library, some suggest utilizing ajax to achieve the same result. For example:
fetch('styles.css').then(response => {
const el = document.createElement('style');
el.textContent = response.text();
document.head.append(el);
});
While the ajax approach involves less code (slightly more with error handling or XHR), I can't help but wonder if there are any inherent drawbacks that I may be overlooking. Considering the reputation of the Filament Group team, it's worth exploring the advantages and disadvantages of loadCSS versus the ajax method.
So what exactly are the pros and cons of using loadCSS versus the ajax approach?