In WP Rig, CSS rules are distributed across multiple files. This improves performance and allows you to work at a module level.
The CSS in WP Rig is architected around three core principles:
- Modern standards
- Modularity
- Performance optimization.
What does this mean for you as a developer? First off, modern standards. You can safely use all the latest modules and CSS techniques, including CSS Grid, custom properties (aka variables), the calc() function, nesting, and more, right in your style sheets.
Most of these features work in modern browsers, and all of them will work in your theme, even in older browsers, thanks to the use of PostCSS and Autoprefixer in the build process.
To put it simply, you write modern, forward looking CSS, and the build process makes it work for everyone.
Second, modularity. Traditionally, WordPress themes ship with one massive CSS file with all the style rules stored in the style.css file. This is inefficient in several ways. For one, it means the entire style sheet is loaded for every view, even if only a small portion of the actual style rules are used. And for another, if a change is made to a rule, the entire style sheet has to be reloaded by the browser, wasting resources.
To remove these problems and modernize developing and loading CSS, WP Rig has split the CSS into separate modular level files which are loaded only when they are used. This means the good old style.css has no actual style rules in it — just a comment telling WordPress about the theme.
The rest of the style sheets are found under assets, CSS, and source. Here you’ll find separate style sheets for the front end and the editor, component level style sheets, and even partials which are included from the component level files. All these CSS files are loaded conditionally on use. (And we’ll talk more about all of this later.)
Finally, performance optimization. Like we talked about earlier, in WP Rig, CSS files are loaded only when they are used. To further improve performance, CSS files are loaded in body at the module level, meaning modern browsers will only load the file if the user scrolls to where that module is.
This is completely different from how things have been done in WordPress themes and most of the web.
And it has a significant impact on performance. WP Rig has custom functionality, allowing you to preload select CSS files when a view is loaded to give your site an additional performance boost. (We’ll talk more about this later, as well.)
All this said, the core goal of WP Rig is to make writing CSS as easy as possible with the help of all the things mentioned here, combined with style lens and prettier, keeping your code clean and in line with coding standards. You write standards-based modern modular CSS…and WP Rig makes sure it meets requirements and loads at lightning speed.