[Concept] Tree Shaking Frontend CSS & Stylesheets a lot

[AdsonCicilioti]

Hello @andrew-worsfold! Congratulations on the tailor project ... it's amazing what you can do with it so quickly and intuitively by making use of the native WP Customizer interface.

As you should see in the title, I would like to bring a thought that can change the way we implement css in our projects, be it through a page building plugin or not. I believe that you already know the concept of Shaking Tree, much used in works in JS, ReactJS, angular ..

I've always thought of a page builder that did not add a stylesheet of all the available components, and most of the time we'll use a two-only one. In addition to our theme, it also has its own style sheet. It bothers me both the presence of two style sheets in the sense of performance, as in the fact of visual conflicts between styles of stylesheets.

Then I think about how I could optimize that relationship. I for example use Bootstrap a lot. Many use the Foundation, among others ... I know it would be complicated to create a selector where the developer would choose which css framework he would like Tailor to use in his components, as this would imply a very efficient trick for comparing element class names .
Dai came up with the idea of ​​the Shaking tree, where each element would already take its own css in line or between the <style> ... </ style> tags, or even a dynamic <style> tag that carried parts of the requested class when it was added a tailor element.
I do not know how much that would be worth, but at the beginning it is an optimization idea, since many developers, agencies and freelancers focused on the good sense between performance and personalization, stop using a Page Builder.

I know Tailor's proposal is to be able to raise a site from scratch almost instantaneously, but there are a lot of artists focused on performance. For me, Tailor is one of the best free Page builders for me and I believe it can get even better.