Qbix-Beginners

Objective¶

To make the following files as small as possible and move CSS code to other files that can be loaded on-demand from the PHP or JS code. If PHP code renders a tool, it would load the corresponding CSS files. Also in Javascript, you can include the .css file where Q.Tool.define() is called, in the corresponding Users.js etc. file. Javascript is done in a different issue.

Go through each of the following CSS files:

Users.css
Streams.css
Places.css
Websites.css

as well as the proprietary plugins:

Travel.css
Communities.css
Calendars.css
Media.css

Do the following for each CSS file:¶

Parse it for selectors with .Some_Class_Name. You can actually automate this process by including the CSS in any HTML file, and then running JS like this ...

Array.prototype.forEach.call(document.styleSheets[i].cssRules,function(a){console.log(a.selectorText)})

But you will be using Node.js . So please use this instead: https://www.npmjs.com/package/css-tree

Then just put it into an array. Next, for each such member of the array of the form ".Some_Class_Name", search the project for all places that class is used. The fastest way to do this is to install the ripgrep program and call it from Node: https://github.com/BurntSushi/ripgrep

Finally, you should sort the selectors by increasing amount of references in the code. So the beginning of the array are classes that aren't referenced at all, and then classes that are referenced only occasionally. These are the ones you'll move the CSS selectors to a different file.

For each selector¶

Now that you have a list of least-used selectors, consider moving them to their own files. Name the files accordingly. For example, Users_friendSelector... and Users_facebookDialog... classes from Users.css aren't used anywhere, so move them to Users/Facebook.css instead.

If the classes belong to a tool, consider making a css file named after that tool (the standard way: plugins/:module/css/tools/:toolName.css

Every time you move a class, make sure to find all the places in the code where it was referenced, and call addStylesheet in PHP or JS to load the stylesheet, so it be used! By default, addStylesheet is rendered in the current slot, so it may be removed if the slot is cleared during Q.loadUrl. If you need this stylesheet to persist, consider adding it under "" slot or something.

What to do with Q.css¶

As far as Q.css most of the stuff there is used, but basic_... classes are barely used. Move them to Q/basic.css

Without them, it's 21 KB minified.

After you are done with these steps, update the issue. Then if you have any more ideas, please create another issue and tag the watchers of this issue.