In-body modular style sheets means the developer defines when and where modular style sheets are loaded. Here, we go over how this is done and how you can make modular style sheets of your own.
The style sheets in WP Rig aren’t just modular in that they contain individual modules, like comments, sidebars and widgets. They’re also modular in that they load with the module they affect.
Meaning, if you have a page that has the sidebar, then the sidebar.css file loads; and if you have a page that doesn’t have a sidebar, sidebar.css does not load, because it belongs to that module.
In addition, these style sheets are loaded at the component level in the body element.
Take for example a page with some comments on it. If you scroll down to the comment section, and go to Inspect Element, you’ll see that right in the HTML, there is a call for the comment style sheet. The call sits in the middle of the body element, not inside the head element where you normally see link elements to style sheets:
It might look really crazy, because shouldn’t you be calling the style sheets at the very top?
Not necessarily. Modern browsers can do something with this that is completely new. In the future, when all the browsers are online with this, we’ll be able to call style sheets like this in the middle of the body, and then the browser will only load the style sheet if the user actually scrolls to that point in the document.
That means the style sheet, and the bandwidth it takes, will *only* be used if it’s actually in use in the browser. Until then, we can still add the style sheet like this and then preload it if we want to to make it so that the browser is aware of that style sheet and loads it. Either way, loading a style sheet like this in the body where the module is displayed improves performance.
So how does this actually work? Where is the style sheet actually being queued in?
To see that, we have to go down to comments.php itself. This is the template file that’s called any time there is a comment available on the page:
Here you can see at line 20 it says, is password required? If so, then do nothing.
Otherwise, it says at line 24: use wp_rig()-> print_styles(). It calls in the wp-rig-comments style sheet. This function is what actually calls in the style sheet.
When you start looking through the different template files, you’ll see this function appear again and again. For example, if you look at sidebar.php, you’ll see wp_rig()-> print_styles,() wp-rig-sidebar, and wp-rig-widgets because we need the widget styles in addition to the sidebar.
If you go to index.php, you’ll see at the top, there is wp_rig ()->print_styles, wp-rig-content. That means the content style sheet is printed before the actual content is displayed. And, as you build out your own template, you could then create a new custom template with some new custom content, create a custom stylesheet to go with it, and call that style sheet in only when that component is displayed.
So we’re actually using the template hierarchy in WordPress, using these different files to call in the style sheets they need. And that way, it’s conditional. It’s not on us to write some crazy conditional function. This way, we’re saying: if the template file loads, then load the style sheet that comes with the template files.
If the template file does not load, then no style sheet is loaded, because the template file is where that style sheet is loaded. This is really straightforward and it allows you to control exactly what happens in each template file without having to think of any of the other files in the process.