[docs] Issue with 'No Inline CSS Styles'

[faospark]

https://webhint.io/docs/user-guide/hints/hint-no-inline-styles/index.html the old notion of style not being cached is not necessarily true anymore in fact this advice is rather obsolete these days. progressive app implementation fully caches a page to viewed offline. in terms of browser rendering inline-styles for small tweaks on particular page via is significantly faster than putting small line of css on particular stylesheet.

completely avoiding inline css is wrong because there are case uses for it .

[antross]

Thanks for the feedback @RealUn2ken!

the old notion of style not being cached is not necessarily true anymore in fact this advice is rather obsolete these days. progressive app implementation fully caches a page to viewed offline

@RealUn2ken, to clarify, are you suggesting the guidance is only invalid if the target page is cached for offline viewing?

@bolah2009 any thoughts since you introduced this hint?

cc @webhintio/contributors in case anyone else has an opinion on this.

[molant]

is significantly faster than putting small line of css on particular stylesheet

It is not clear to me what "faster" means in this context. Is it for the developer? the user when rendering the content? Something else? Also, can you please point us to any recent data about this? I remember reading about this many years back and inline styles where a perf killer. IIRC the browser needs to stop the parsing of the HTML every time there's a <style> tag and then reprocess the layout because it could apply to previous elements (or something around those lines).

completely avoiding inline css is wrong because there are case uses for it .

That's why webhint allows you to configure it 😊 Should this be turned off by default? I'm not sure, but I'm open to be convinced with data.

[faospark]

Thanks for the feedback @RealUn2ken!

the old notion of style not being cached is not necessarily true anymore in fact this advice is rather obsolete these days. progressive app implementation fully caches a page to viewed offline

@RealUn2ken, to clarify, are you suggesting the guidance is only invalid if the target page is cached for offline viewing?

@bolah2009 any thoughts since you introduced this hint?

cc @webhintio/contributors in case anyone else has an opinion on this.

the guiding principle of the old suggestion dates back in the day where in it was ideal to put all our styles in one stylesheet and rely on cache for loading the stylesheet. however browsers have evolved and that is why you do not see this suggestion a lot testing tools like pagespeed or webpagetest how browsers work now is a little bit different and has something do with critical css and and your critical rendering path . the likely hood of developer inlining their css declaration on that particular element on particular page is more likely intentional. not unless everysingle element has inline style then that is a problem but if it s less than 5 and those inline style only appear on that page then its actually beneficial in you sparing some bytes on your generals stylesheet.

in terms reusability of css well its good but as we have seen css framewworks like bootstrap putting them in one place is rather waste of bytes and actually slows down the rendering of the page as per discussed above regarding critical rendering path . literally there is a tool in chrome and edge called css coverage that tells you css classes that you dont use. your simple overrides dumped to your main stylesheet can really result to bloating overtime.

https://web.dev/fcp/ or fcp can give you a grasp that inline is not that bad especially when it is critical to the page and these days developers inline thing because it critical to that page and because it is meant to be a general design of the site