LetyShops preempts styles, how can I make the styles file at the head without !important?

Question

css

There was a strange problem, the "LetyShops" application is installed in the browser, the Google font material icons is used in the template, respectively, in the places of the connected icons there is the ".material-icons" class.

Everything works in all browsers, but suddenly I found styles were broken in FireFox
Proofs (#letyshops-notification - indicates that the styles belong to this application):

spoiler

Realizing that this problem is due to the installed application, I first of all thought in the direction of !important, but such a moment may arise, in half a year I will forget about this problem and will expand the code, write a couple of lines of styles again and before I find this bug it will see several users, the question is, is it possible to somehow limit / disable the influence of external styling?

Answer 1

I ran all my css files through regular expressions, replaced ".material-icons" with ".material-icons_my", and also ran all template files to replace the class.
In general, I came to radical measures, I hope my experience will be useful to someone.