Cleaning up after editing + importing css to theme stylesheet

Hey Nuno,

I’m glad you managed to fix your header issue. Regarding your other questions:

Merging selectors with same properties

It’s possible to over-optimize. I understand that you gave up on w3 total cache due to problems and are now looking for ways to optimize the code generated by Microthemer. I recommend that you try Autoptimize. I recently made some changes to Microthemer to make it play nicely with Autoptimize. And I think Autoptimize is a great solution for less advanced users (the multitude of options in w3 total cache overwhelm me too).

Using a minification and concatenation plugin will do far more for your page speed than merging selectors that use the same properties. And even if that weren’t the case, merging selectors that use the same properties is only advisable some of the time. Let’s say you were styling 3 different buttons. If they shared the same styling but only differed in color, it would make sense to create a merged selector like so:

#button-1, 
#button-2,
#button-3

To which you would apply styles for font, padding, border-radius etc. And then create separate selectors for each button in order to set individual background colors. Although if you have the ability to edit the HTML of the buttons, a better solution would be to give each button a class of button and then target all buttons with a simpler selector:

.button

(plugins and themes often add helper classes like this to the HTML content they produce even if you can’t add new classes yourself).

An example of when it wouldn’t be appropriate to merge selectors that share common properties is when the commonality is more haphazard. You may want to give news feed items a thick white border as well as your testimonials. You could create a selector that targets both and then apply the white border only once. Some time later you may want to make your testimonials jump out more by increasing the font-size and changing background color. But by doing so you will also increase the font-size and change the background color of the news feed items, potentially breaking your layout/making things look ugly in that section. This situation is unmaintainable and best avoided, even if it does reduce the number of characters in active-styles.css slightly.

Merging MT stylesheets with child theme css stylesheet (replace original css statements) to reduce loading of different, maybe even conflicting styles, and start fresh again over a clean sheet

This a tricky one. When you override styles via Microthemer, you won’t necessarily override every single property a selector in the child theme applies. So you can’t remove that selector. You could copy and past MT styles to your child theme’s stylesheet to reduce one http request, but a much better option would simply be to use Autoptimize to concatenate your stylesheets.

In future, we will have an stylesheet import option that pulls media queries, selectors, and styles from a stylesheet into MT’s interface. You could then remove your theme’s stylesheet from your web pages, all the styles would be in one place (MT). This feature is a little way off at the moment though.

Dividing Microthemer’s stylesheets per template, so that ppl using caching plugins could remove some unnecessary stylesheets on some pages loading?

Noah suggested this in a previous thread. And I added it to our ToDo list. Here’s my idea for implementation: https://themeover.com/forum/topic/next-best-thing-for-microthemer-microthemer-logic/#post-7826

I hope my answers have been somewhat useful!

Happy new year!

Ah yes, sorry I missed that question.

Are you aware that the feather icons in the main menu show whether or not a selector has any styles?

On the empty selector in the screenshot there is no feather, and so you can quickly delete these using the bin icon. The feathers are also present on the responsive tabs to help you relocate your styles.

Also, folders in the main menu only have numbers next to their names if they contain selectors.

Is that what you were after?

I’m with you now. Unfortunately if such a tool exists I don’t know about it. It would need to analyse the HTML on every page of your site and then cross reference that against your stylesheet. Not impossible, so it may exist. Please let me know if you find it!