Importing style.css changed loading order of stylesheets

Author Posts

lloydsilver

So when I imported my theme’s style.css, it worked, but then I noticed that certain styles weren’t working correctly any longer. Like the button text should have been bold but instead was inheriting a normal property. Upon inspection I saw that the order of loading of stylesheets after the import was causing an issue.

Is there a best practice to make sure that this doesn’t happen? I had about 7 folders created. Are the styles within those folders, and the folders themselves, in the exact order that they were in while they were in style.css? If so, then would I just make sure those folders are at the top of the list in Microthemer?

Or, is there something else?

Thanks


Sebastian

Hey Lloyd,

Microthemer’s CSS import script should match the order of selectors exactly. So the folders should be in the correct order, as well as the selectors inside them. So as you say, everything should work if you ensure that the imported folders are at the top, and the MT customisations you made before importing the CSS are below the imported folders.

If that doesn’t solve your issue, there could be problem with the import script, which I will investigate.

One thing I should point out is that if you are importing all CSS styles from style.css into Microthemer mainly for the purpose of saving an extra http request, another option would be to use a concatenation and minification plugin like Autoptimize. Autoptimize will combine your theme’s style.css stylesheet and Microthemer’s active-styles.css stylesheet into one stylesheet. And minify the contents. This approach may be easier to maintain while still provides the same performance boost, as you won’t have to deal with a large number of theme styles in the Microthemer interface.

Just a thought.

Cheers,
Sebastian


lloydsilver

Thanks. And yes, I use Autoptimize frequently. I wound up going with just moving those styles that I want to alter into Microthemer and left the rest of styles in styles.css so I didn’t clutter up Microthemer.

You must login or register to reply to this topic.