Elementor CSS inheritance is breaking own rules

Hi,

whoever of your developers thought this line of CSS would be a good idea should learn about CSS inheritance. Because it is causing massive conflicts with own styles and CSS. For example I have small transitions that are slightly visible and are set to work also on browsers set on reduced motion. Your CSS simply overwrites my styles because its specificity is extremely high.

CSS found in your file “custom-frontend.min.css”:

@media (prefers-reduced-motion:reduce) {
  .animated {
    animation:none!important
  }
  html * {
    transition-delay:0s!important;
    transition-duration:0s!important
  }
}

The specificity of your CSS

html * {
    transition-delay:0s!important;
    transition-duration:0s!important
  }

pretty much outmatches all CSS regarding transition delays and durations also because “!important” is set. On this level (select all elements “*”) you should really avoid this. You pretty much killed the CSS for all users regarding transition delays and durations who have set this for reduced motion and are overwriting all styles.

So, please remove this line of CSS completely and do it on the html elements where you really need it or use specified classes for your elements where you want to use this instead of trying to force it globally for all elements coming after the html tag. Also the !important-declaration has to be gone. As a plugin developer you shouldn´t use this as it will always at some point create a conflict with the CSS of users.

This is really not the way to go when u want to be a good developer so please fix this and contain it to only the need of your plugin.

Thanks.