Cleaning up after editing + importing css to theme stylesheet

This topic contains 6 replies, has 2 voices, and was last updated by  Sebastian 6 years, 8 months ago.

Author Posts

atelierbetula

Hello themeover,

First of all, happy new year.

The past few days were kind of a nightmare going over some issues with caching plugins, html and css audits and getting stuck with little time and no direction to follow.

So any help will be deeply appreciated.

I can’t live without microthemer anymore, and eventually we need to start learning code to make things happen. Your plugin makes it easy to edit the styling of my site, but when someone picks up this tool with completely no knowledge of css or web design, after some weeks / months editing, we find ourselves with plenty of selectors and rules, some of them empty because the class or the element has changed, or we changed the layout, some of them crossing over other sets of rules previously defined.

My (few) question is, what can we do to help identifying superfluous code that only tangles our page access speed, clean it up, and possibly correct overlapping rules?
– or merging selectors with same properties,
– 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,
– dividing Microthemer’s style sheets per template, so that ppl using caching plugins could remove some unnecessary stylesheets on some pages loading?

After some issues with W3 caching plugin (it minified my css and js and completely scrambled my page elements / site) I removed that plugin, and I noticed that on Phone media query, I can no longer see my responsive menu items when pressing menu button, and the strange thing is that I can see the page’s header on my smartphone and on phone media query on my browser, but when I turn on Microthemer’s plugin, the header slips up the top of the page and I can only see half of it – now I don’t know anymore if this is a css issue or something related to the problems of disformatting I had before with w3cache.

If you could kindly assist, would be much appreciated.
My site: http://atelierbetula.com/

Any other information, or if looking around directly inside my site would be easier, just let me know – I know Sebastian is a good guy 🙂

Btw, in regards to beaver builder issues I’ve read in the forum, my solution to be able to style them was to give a class to the elements (column, text editor, row or p and h# elements, withing the module editing) and then work it on microthemer.

Thx in advance
kind regards
nuno


atelierbetula

Hi again,

The issues with the header and responsive menu are cleared – it was just some css selectors that needed to be fixed.
In regards to the other questions when you have time please let me know what can be done.
Thx
Nuno


Sebastian

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!


atelierbetula

Hi Sebastian,

Thanks for your comprehensive reply and for pointing out the Autoptimize plugin, I’ll give it a try.

Indeed merging selectors might not be the best solution.

In regards to my first question:

what can we do to help identifying superfluous code that only tangles our page access speed?

Could you try to point me a way to audit for empty sitewide css rules so that it is easier to clean up my MT stylesheet (instead of checking every selector in every page to see if it is still being used)?

Good that MT will be able to import the child theme stylesheet and work on it’s own, nice improvement.

Keep up the good work, and thanks for delivering such a great plugin 🙂
nuno


Sebastian

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?

find empty selectors

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?


atelierbetula

Hello Sebastian,

I know about the feathers. The thing is that I change plugins and layout of the page regularly. And the styles that I had previously applied to those elements on the page are no longer valid because either the element now has a different class or the plugin used for galleries, widgets or such, creates different kinds of elements.

E.g. The style that I applied to buttons some weeks ago had a selector like “div.wpi_button_horizontal” or even a specific ID
After I change it into a different button using the same plugin, it will change the ID or even use a different class. The result is that I will still have a selector with rules applied that do not target anything on any of my pages.

See the screenshots below. I created a bogus selector called “.dgsksgdhd” – I applied a rule to it, therefore it shows me the feather. But you will not find anything on my page with that class.

What I was asking was if it was possible to audit the sites for the different elements, classes and IDs present site wide, and detect which of the css selectors that I currently have on MT do not target anything on my site

MT1
MT2

Thx for your help


Sebastian

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!

You must login or register to reply to this topic.