Archived topic
Custom CSS in a wp_head Hook Element with Conditional Display
1 reply · Started by AMBTL on September 12, 2018
Hi guys,
I think what I want to do makes sense, but I thought “before I do something silly, let me ask the experts first”…
I have like 1500 lines of Additional CSS in the Customizer. It was fine during the development because I could see the live preview, but now it probably would be a good moment to optimize it.
Large parts of the custom CSS are relevant only for specific CPTs or taxonomy archives. So, I thought maybe it would be a good idea to move this CSS to a wp_head hook with conditional display like this:
<style> .something {something}</style>
This way I could very nicely and conveniently manage the CSS for various sections of the site. AFAIK, Simple CSS cannot manage CSS globally like this, but a hook element could.
I don’t want to create separate external stylesheet files and then tinker with them through FTP when need to change some small thing. So, a conditional wp_head hook seems very convenient…
Would this be a good use of the hook element and are there any cons to consider?
I use Autoptimize, and I assume it should extract the relevant CSS for each URL from the hook, right?
Cheers,
Tom
Hi there,
for 1,500 lines of code. No i wouldn't bother. I couldn't see any performance improvements over loading it once and having it cached at the browser. It could actually be negative. But 1,500 lines of code is way over the limit that you should be adding to additional CSS. All of which is inline in the <head>. This really needs to be in child theme style sheet.
Might be worth looking at an IDE with FTP sync if you're doing a lot of 'tinkering'.
