CSS
Critical CSS and used CSS: what these optimizations remove, why a layout breaks, and how to put back only the missing rule.
Remove unused CSS broke my layout: how to find the missing styles
A used-CSS pass keeps only the rules it saw in use on one snapshot of the page, so anything that was not on screen at that moment (an open state, the other device, content loaded later, an icon font, an entrance animation) loses its styles, and each of these gaps has a signature that tells you which rule to put back.
Why does my WooCommerce mini cart stop showing when I turn on Remove Unused CSS?
Your mini cart panel is hidden until someone hovers it, so a used-CSS pass removes its styles and a JavaScript delay stops it from opening. It comes back once you keep its styles in a safelist and let its scripts, cart fragments included, run.
Why did my critical CSS break my menu / overlay (it shows up open on load)?
Critical-CSS generators only keep the styles for what is visible at the top of the page on load. Your elements that are hidden by default and opened on click (mobile menu, search overlay, modal, drawer) are judged useless and removed. The result: on load, they show up open, broken, unstyled.