- [Instructor] There's another trick you can use
to further improve the performance of CSS handling.
This is not really a hack,
it's a feature that was introduced in most browsers
all the way back in 2016,
but it's not a well-known feature.
That convention is to load all your link elements
pointing at style sheets in the head of a document,
but that's not a requirement.
You can, if you want to, load a link element
anywhere inside the body
and you get incremental CSS rendering automatically.
And the great thing is this actually works
in older browsers as well,
all the way back to the beginning.
Only difference is they just ignore
this incremental loading part
and load everything at the same time.
This approach feels a bit weird
because it's not how we usually do things,
but it has benefits both for perceived performance
and for development, especially when you start
combining them with the things
we talked about in a previous movie
with deferring loading of CSS.
Loading style sheets in body
means you can have each component
load its own style sheets on the fly.
That way the component brings its own styles to the table
and you don't have to load any styles you don't need.
This makes for much cleaner and more manageable code
and it falls in line with modern
component-based development practices.
It's not the biggest performance win,
but it's absolutely worth considering
and it also changes the way we think about
how we serve styles to the browser
in a really interesting way.