Stylesheet Loading Order When Using Elementor

Author Posts

Joe Fletcher February 25, 2022 at 2:22 pm

What are the recommendations for which order to load stylesheets when working with Elementor? Should MT’s stylesheet load last and override Elementor, or prior so that Elementor overrides MT?

I’m sure both could work, but wanted to see if there are pros or cons either way. For example, do folks prefer having MT for final touches, using Elementor as the main styler by having MT jump in when necessary. Or, use MT to define the base styling and have Elementor override what MT styles? Is there a way that “just works” more often than the other?

Joe Fletcher February 25, 2022 at 9:43 pm

So after experimenting with the “Stylesheet loading order”, it seems MT’s CSS can only load either before all other CSS or after all CSS, which is the default. Since that’s the default, I’m going to assume most people just leave it as is and work with MT’s CSS loading after Elementor, so I will work that.

However, I wondered if one way of working with Elementor would be for this order:

  1. Theme’s CSS
  2. Elementor and Elementor Pro (default boilerplate stuff)
  3. Micro Themer CSS
  4. Elementor specific (post-XXX.css, etc.)

This would load the general stuff first, then MT makes some styling, and finally, Elementor could override MT. For example, I could create H2 styles in MT. But in Elementor, I could override that just by using the standard Elementor styling options.

Sebastian February 28, 2022 at 11:37 am

Hey Joe,

Thanks for your questions!

Elementor-MT CSS management
On the question on how to manage to CSS via Elementor and MT, I think it just comes down to personal preference. Some work mostly in Elementor and use MT to fill the gaps. While others use Elementor purely for building content and do all the CSS in MT.

Stylesheet order
On the question of stylesheet loading order, most people do leave MT’s stylesheet loading fairly late (default). As you normally want MT styles to override other styles. And if the loading order is later, the CSS selector specificity score can be exactly the same as the Elementor selector, instead of having to be higher.

Overriding MT from Elementor and vice versa
But if you prefer the mixed approach you outlined, where you frequently override CSS from either tool just make sure you turn off the global !important setting in Microthemer’s preferences:

Settings > General > Preferences > CSS and Sass > Always add !important to CSS styles > No

Otherwise it would be tricky to override MT CSS from Elementor. You may also want to set MT’s specificity switch to low at times.

I hope that helps. Please let me know if you have any other questions.

Cheers,
Sebastian

P.S. WordPress compares the stylesheet order number you define in MT preferences with the priority order other plugins set when loading their CSS. So it isn’t necessarily the case that MT’s CSS will come before or after all other CSS on the page. If that’s what you observed when adjusting the load order by 1 each time, it probably just means that Elementor sets the same loading order for all of it’s stylesheets.

Joe Fletcher February 28, 2022 at 2:00 pm

Thanks for clarifying all of that. Makes sense. Good point about the Elementor loading order.

And yes, it seems Elementor, WordPress, and all the other plugins I’m using load at the same priority, probably 10. Which would make it difficult if not impossible to do the sort of ordering I pondered about above.


Sebastian March 1, 2022 at 9:12 am

You’re welcome! Please let me know if you have any other questions.

You must login or register to reply to this topic.