Aggregating CSS adds new CSS that doesn’t exist in my code

  • Resolved adamhideseek

    (@adamhideseek)


    2 months ago

    When I enable the ‘Also aggregate inline CSS?’ option, the Autoptimize plugin adds new CSS that doesn’t exist in any of my files or pages. In one case, it adds a border-bottom to most links even when I have explicitly set those links to border-bottom:none. In another case, it removes the margin-bottom from every Elementor element by creating a new line of code that includes “.elementor-widget:not(:last-child) {margin-block-end: 0px;}”, which is overwriting the original line of CSS, “.elementor-widget:not(:last-child) {margin-bottom: 20px;}”. This is changing how my entire website looks, even though the Autoptimize CSS is not more specific than the original CSS. Why is the plugin creating new CSS that overwrites my theme or my custom CSS? In both of the examples, the Autoptimize plugin has copied the same exact classes/IDs from the original CSS but changes or adds new styles that ends up overwriting the real CSS. I would like to keep this option enabled because it seems to significantly reduce the number of lines of code on the site, but I shouldn’t have to audit every element on the site to check to see if the plugin is changing it’s CSS. Please advise.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    AO does not have any CSS of its own to add on the frontend, so any CSS in the aggregated file has somehow to originate from one of the many linked or inline CSS of your site (from WordPress core, theme, pagebuilder and plugins).

    In the case of that .elementor-widget:not(:last-child) for example, you can see in below screenshot from my Firefox inspector for the un-optimized site (by adding ?ao_noptimize=1 to the URL) that the margin-block-end is indeed both mentioned inline and in post-667.css (once unset and once 0px).

    View post on imgur.com

    that being said; generally (as in; exceptions notwithstanding) aggregating does not offer substantial benefits thanks to HTTP/2 which is great at downloading multiple files at once. additionally also aggregating inline CSS will result in separate aggregated CSS files for almost each page, which means (a) users won’t be able to use CSS from cache and (b) your cache size will increase more rapidly.

    if however you insist to aggregate all CSS, you could add some !important flags to your custom code, that should do the trick.

    hope this clarifies,
    frank

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.