Optimal CSS Optimization requires an understanding of how CSS is loaded. This understanding leads to the following strategy regarding the optimal way to load CSS (to account for render-blocking).
In the context of this optimization strategy, additional stylesheets should be created for each device (e.g, desktop.css, tablet.css, mobile.css) which use media queries to account for render-blocking and load priority.
So the question that Oxygen Builder users must answer is "How can I implement this CSS strategy using Oxygen?"
You can't.
How does Oxygen Builder lack CSS Control?
There are a few ways to write CSS in Oxygen Builder:
Use the visual editor to style an ID (allegedly inlined).
Use the visual editor to style a class which is added to universal.css.
Use the visual editor advanced tab to style an element (via ID) using custom CSS.
Use a code block element's CSS tab to add CSS to the footer, or it's PHP tab to add a <style> where the code block is output.
Use the stylesheet editor to add CSS to universal.css.
So Oxygen does not let the end user control the CSS that is defined in the HTML <head> or create custom stylesheets beyond universal.css. Therefore, the solution to this problem is to allow the end user to define CSS in the <head> and also create custom stylesheets.
So how do we do that?
Feature Request
Describe the feature you'd like to see included in Oxygen.
For IDs and Selectors, implement the ability to scope ID and Class selectors to a custom stylesheet (including universal.css) or remain inlined. Here is a potential UI mockup of the visual editor (using a text input form element) for that feature.
Using the value of inline would inline the style in the <head>.
For the Code Block Element, implement the requested and supported feature requests which propose the option to (inline) Code Block element code to the webpage head.
For the Oxygen Builder Global Stylesheet Editor, let the user define whether the CSS in the stylesheet is added to universal.css or a custom stylesheet.
Implementation
These features let the user output inline code in the <head> of the webpage and also create external stylesheets. However, some implementation details must be considered.
Which custom stylesheets are loaded on a given webpage?
Right now, Oxygen Builder loads the framework.css and universal.css on every webpage. In the context of this feature request, this loading strategy makes sense because it's expected for these stylesheets to be required on every webpage. So the implications of adding custom stylesheets (that don't apply to every webpage) is that there should also be a way to control which (custom) stylesheets are loaded on a given page.
So to rephrase the question above, How does Oxygen Builder determine which custom stylesheets are loaded on a given webpage?
One implementation is to load the respective stylesheets for a webpage's selectors: Oxygen would determine all the selectors that exist on a page, then load the stylesheets that are used by those selectors (on that page). However, this implementation must be approached with caution because it has severe performance implications when implemented incorrectly.
So implementing this feature without performance costs could require much more work than expected.
Another implementation is to let the user define which posts, pages, templates, etc, that a custom stylesheet is loaded on; while loading every custom stylesheet on every page by default. However, this functionality is already provided by performance optimization plugins.
An example of this implementation is provided by OxyPowerPack's SASS Stylesheet UI.
Implementation Detail: Critical CSS
While it's mathematically possible for Oxygen Builder to extract its own Critical CSS for a given webpage, the feature is not worth implementing because other plugins include CSS on the page. So the Critical CSS aspect of CSS Optimization is not addressed by this feature request because I wouldn't solve the Critical CSS aspect of CSS Optimization using Oxygen Builder.
Workarounds
Critical CSS
Use a caching plugin that extracts Critical CSS.
Inline CSS
Implementing inline CSS is supported in Oxygen via Code Blocks:
Body: Use the PHP tab with an HTML <style> tag. However, doing so is not recommended.
Footer: Default Behavior of Code Block.
There is not a simple workaround to add inline CSS to the header in Oxygen.
So adding inline CSS to the heda of a page, template, etc, becomes as complicated as adding custom code to the head of any page in WordPress.
Custom Oxygen Stylesheets
OxyPowerPack (SASS Stylesheets) lets the end user create custom stylesheets how styles are organized and enqueued. However, this requires the end user to
Oxygen Builder lacks CSS Control which prevents an optimal CSS implementation.
Context
What does this feature request solve?
The ability to control how your CSS is developed and organized.
What are the use cases for this feature?
CSS Development, Optimization, and Performance.
The following issues encapsulate the issue of CSS control in Oxygen:
The following issues are also addressed by this feature request:
The following issues should be addressed alongside the implementation of this feature request:
The following issues are related to CSS control, but not this feature request:
How does this feature affect CSS optimization?
Optimal CSS Optimization requires an understanding of how CSS is loaded. This understanding leads to the following strategy regarding the optimal way to load CSS (to account for render-blocking).
In the context of this optimization strategy, additional stylesheets should be created for each device (e.g,
desktop.css,tablet.css,mobile.css) which use media queries to account for render-blocking and load priority.So the question that Oxygen Builder users must answer is "How can I implement this CSS strategy using Oxygen?"
You can't.
How does Oxygen Builder lack CSS Control?
There are a few ways to write CSS in Oxygen Builder:
universal.css.<style>where the code block is output.universal.css.So Oxygen does not let the end user control the CSS that is defined in the HTML
<head>or create custom stylesheets beyonduniversal.css. Therefore, the solution to this problem is to allow the end user to define CSS in the<head>and also create custom stylesheets.So how do we do that?
Feature Request
Describe the feature you'd like to see included in Oxygen.
For IDs and Selectors, implement the ability to scope ID and Class selectors to a custom stylesheet (including
universal.css) or remain inlined. Here is a potential UI mockup of the visual editor (using a text input form element) for that feature.Using the value of
inlinewould inline the style in the<head>.For the Code Block Element, implement the requested and supported feature requests which propose the option to (inline) Code Block element code to the webpage head.
For the Oxygen Builder Global Stylesheet Editor, let the user define whether the CSS in the stylesheet is added to
universal.cssor a custom stylesheet.Implementation
These features let the user output inline code in the
<head>of the webpage and also create external stylesheets. However, some implementation details must be considered.Implementation Detail: Loading External Stylesheets
Which custom stylesheets are loaded on a given webpage?
Right now, Oxygen Builder loads the
framework.cssanduniversal.csson every webpage. In the context of this feature request, this loading strategy makes sense because it's expected for these stylesheets to be required on every webpage. So the implications of adding custom stylesheets (that don't apply to every webpage) is that there should also be a way to control which (custom) stylesheets are loaded on a given page.So to rephrase the question above, How does Oxygen Builder determine which custom stylesheets are loaded on a given webpage?
One implementation is to load the respective stylesheets for a webpage's selectors: Oxygen would determine all the selectors that exist on a page, then load the stylesheets that are used by those selectors (on that page). However, this implementation must be approached with caution because it has severe performance implications when implemented incorrectly.
So implementing this feature without performance costs could require much more work than expected.
Another implementation is to let the user define which posts, pages, templates, etc, that a custom stylesheet is loaded on; while loading every custom stylesheet on every page by default. However, this functionality is already provided by performance optimization plugins.
An example of this implementation is provided by OxyPowerPack's SASS Stylesheet UI.
Implementation Detail: Critical CSS
While it's mathematically possible for Oxygen Builder to extract its own Critical CSS for a given webpage, the feature is not worth implementing because other plugins include CSS on the page. So the Critical CSS aspect of CSS Optimization is not addressed by this feature request because I wouldn't solve the Critical CSS aspect of CSS Optimization using Oxygen Builder.
Workarounds
Critical CSS
Use a caching plugin that extracts Critical CSS.
Inline CSS
Implementing inline CSS is supported in Oxygen via Code Blocks:
<style>tag. However, doing so is not recommended.There is not a simple workaround to add inline CSS to the header in Oxygen.
So adding inline CSS to the heda of a page, template, etc, becomes as complicated as adding custom code to the head of any page in WordPress.
Custom Oxygen Stylesheets
OxyPowerPack (SASS Stylesheets) lets the end user create custom stylesheets how styles are organized and enqueued. However, this requires the end user to
universal.css.Stylesheet Loading Behavior
Customizing how a stylesheet is loaded in the head of a webpage is possible using a performance optimization plugin.