I’m using a child theme with BB, and I find it easier to use the child theme custom CSS area to add my custom styles, rather than the custom CSS area in the Customizer. Is this the best practice for this, or do you recommend using the Customizer to add custom CSS?
I’ve found that in Safari for Mac, the BB customizer is slow to open and use. (I’m running a lot of plugins on that particular site.) It opens fine in Firefox and Chrome, so I’m not sure why there’s a problem in Safari.
That shouldn’t be a problem. It’s all a matter of personal preference.
Having a lot of plugins may be what’s causing the issue. I know the guys are all Mac users so if there’s an issue, they’d be the first ones to know. You could try the plugin deactivation route, i.e., disable all plugins and test the Beaver Builder while reactivating each to determine if the issue is related to a 3rd party plugin.
I’m going to chime in on this, as it’s a topic that’s come up several times recently - one of them was discussing a feature request for BB for per page CSS.
My thought on this is to always use the Child theme CSS file (Appearance>Editor>Stylesheet(style.css). This requires no plugin, is easy to find, doesn’t add code to headers (like some plugins) and several other advantages over other options.
I used to be a big proponent of a custom CSS plugin but it languished for a bit in need of an update, I switched to using the child theme CSS and, while it doesn’t have a code editor (highlighting), it’s still the best, safest and technically correct option.
I see people asking to be able to add CSS on a per page basis and anytime I see the option to put CSS somewhere other than one central location, I’m very wary. Imagine you get to take over a site that has CSS spread across several areas - the PITA it would be to find it all would make me rather irritable.
You can target CSS on a per page basis a couple of ways. The easiest is using the Page ID, which you can get with various plugins (and which is useful to know for many reasons):
.page-id-991 { your custom css }
As for using the Customizer - I see no reason to, especially given that it’s such a tiny area, which makes it difficult to work in. I’m still not understanding the logic behind it’s implementation - it’s tiny, has no highlighting and, to get to it means having to make several clicks and has resulted in bizarre issues when I’ve tried to keep it open while working on the site.
I agree with the points you made and have been using the child theme stylesheet for a number of years. But there’s been so much focus lately on the customizer that I thought I’d throw it out there for some opinions.
I don’t really see the need for per-page CSS either. I’d rather have all of my styles in one location and target the page ID when needed.
I’m not yet a big fan of the customizer. I preferred the theme panels instead, at least on the better-known premium themes. I find the customizer buggy with Safari on sites with a lot of plugins, so it seems there’s work to do on that yet.
One of the advantages for using the CSS code in the customizer is the live preview. And on the latest theme update, we’ve also added the ACE editor.
The goal for per page CSS is to reduce resources. Not having to load the tons of styling on the homepage on other pages and vice versa would be good for page load. Anyway, these are all just my observations as well.
I find the Customizer buggy as well and the boxes in it are way too small!
Unless you’re doing a TON of per page CSS, I doubt it’s going to have a lot of impact on site load time/resources. BUT I certainly have been in that situation and usually use a function to load a specific style sheet per page, like so:
if ( is_page( page ID ) ) {
wp_enqueue_style( 'path/to/your/custom/css/file' );
}
else wp_enqueue_style( 'path/to/your/original/css/file' );
But that has it’s own foibles.
It would be cool if the Customizer eventually allowed some kind of ‘per page’ option where it only loaded the rules defined for that page. Having all CSS in one area is what I think is most important - or at least some kind of default logic too it. It’s when I have to chase down someone elses CSS code that’s scattered everywhere that makes me grrrrr…
