exclude a "common" inline css code for a specific css file

hmmm, I would try to be a bit more specific; assuming for example your inline code is something like;

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

you could try to exclude with “@media” or “@media (max-width: 600px)”?

sorry, afraid you lost me there; are you still talking about the CSS exclusions, or is that a separate question?

OK, had a look and the problem is that you (probably) excluded bootstrap.css from optimization. This means that, whereas without optimization your style.css is loaded after bootstrap.css, now the optimized CSS that contains the style.css code is loaded before bootstrap.

There are several possible solutions to this problem;

• mark the appropriate rules in your style.css as !important, e.g.

  .input-prepend .add-on {
    background: none repeat scroll 0% 0% transparent !important;
    border: 0px none !important;
  }

• do not exclude bootstrap.css from optimization (but you might have had other reasons for doing so)
• change the place where the optimized style is inserted, using the API, by using (in your child theme’s functions.php) e.g.;

  add_filter('autoptimize_filter_css_replacetag','roscus_ao_override_css_replacetag',10,1);
  function roscus_ao_override_css_replacetag($replacetag) {
  	return array("</head>","before");
  	}

Hope this helps,
frank