Reply To: Critical CSS – inline styles overriding non-critical CSS

[Paulie_D]

I guess my problem lies mostly with reusable classes that appear in the headline styles, that would normally be overridden.

But they wouldn’t be overridden. They would be defined in the head…and nowhere else.

Why would they be overridden?

. For example my default button focus styles take priority over my ‘success’ or ‘info’ button styles.

I’m not sure you have grasped the concept here.

There should be no reason to define button styles in the head unless you desperately need a button to be styled immediately as soon as the first content is rendered (above the fold).

“Critical” in the context we are speaking of here does not mean ‘base’ styles.

As I said, what makes it ‘critical’ is that it styles the above the fold content because that’s the first thing the user sees and you want it rendered as quickly as possible…and nothing else.