Critical CSS – inline styles overriding non-critical CSS

[serkai]

Inline CSS styles override styles that are not critical, i.e. loaded asynchronously. Whereas it may be possible to add new styles to override inline styles (as seen in a previous article on CSS Tricks – see Override Inline Styles with CSS), this would be counter-productive as these styles worked fine before using critical inline styles.

Has anyone encountered this issue when creating critical inline styles? What was the best way you tackled this issue? Thanks.

[Paulie_D]

Has anyone encountered this issue when creating critical inline styles?

This is the primary issue..you should not be using inline styles at all and certainly not critical ones.

Other than that, I’m not sure what it is you are asking.

[serkai]

Thanks for getting involved Paulie, have you read this article?

https://css-tricks.com/authoring-critical-fold-css/

I may be tackling this all wrong…

[Paulie_D]

Interestingly, I saw a video recently (on here in another thread) that most people ignore the ‘fold’ (certainly) on moblie because they expect the ‘above the fold’ stuff to be

logo
sitename
nav
banner/carousel

..so they automatically start scrolling before content has been fully loaded in the expectation that the stuff ‘above the fold’ is cruft.

[Paulie_D]

Oh…and I see what they are talking about but I think the term ‘inline’ is misleading…it’s more ‘headlining’ in a style tag.

[Paulie_D]

Inline CSS styles override styles that are not critical, i.e. loaded asynchronously.

No…the ‘headline’ styles wouldn’t be overridden at all…that’s the point. There would be no need to do so since they’re already loaded for your ‘above the fold’ content.

The CSS is “critical” only in that it needs to be loaded first for speed purposes for above the fold content…CSS for anything below the fold is less ‘critical’ and so can be loaded asynchronously.

It’s the content that’s critical…not, as such, the CSS.

Whereas it may be possible to add new styles to override inline styles

See above, why would you need to?

[serkai]

Ah okay headline styles that’s what I meant thanks.

I’m not worried about the fold, more so the layout / structure, base styles, and the most basic classes.

I guess my problem lies mostly with reusable classes that appear in the headline styles, that would normally be overridden. For example my default button focus styles take priority over my ‘success’ or ‘info’ button styles.

I’ve began rethinking my approach and seem to be getting somewhere by removing reusable classes. I’m guessing most people use an automated approach? E.g. Critical by Addy Osmani.

[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.

[serkai]

Thanks Paul this is making a lot more sense. Nothing seems to be causing an issue in my CSS now so I think I’m getting there.

[Alen]

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

+100%

We are talking about Critical Rendering Path. As stated:

…goal is to prioritize and display the content that relates to the primary action the user wants to take on a page

http://youtu.be/PkOBnYxqj3k

[wladston]

I was having a very hard time to implement this in a simple, practical way. So I came up with my own code to do it:

https://github.com/wladston/postcss-split

This postcss plugin is super simple: any rules that have a “FOLD” comment will be separated for embedding in the HTML, and the other rules are separated to be loaded async (oh, and it will handle rules inside media-queries too :)

[Author]

Posts