Reduce CSS / CSS only when needed

Trying to squeze every byte out of an site I came up with the following idea, wonder if this could make sense as a suggestion.

There are certains CSS which you need only when certain widgets are used. For example you don't need the forms styling if there is no form on the page.

My initial idea would have been to create an seperate forms.css and do not include the css in the form.
Then when a user drags an form to a page he would also have to drag a css widget and link to forms.css.

Pro: This way the forms would only then be transfered when a front end user surfes to a page with a form
Con: End-user would have to remember to set the css widget

-------------------
Could it make sense to have css settings for widgets within css. So for example in this forms example we would have an Admin settting: Administration - Settings - Advanced - CSS  where we could specify css files to be used for forms for example. I am sure that there are other widgets that could be styled this way to reduce css code.

So when a user would drag a form to a page the css from these settings would be applied.

-----------------

Kind of having Design - Templates - Widget Template CSS

There could be an import/export function so you could easily reuse your css accross projects.

--------------

I know this is a wild idea.

Markus

PS: Don't want to use my own templates to keep Sitefinity as pure and core as possible.

An additional benefit could be that these CSS settings could be used for WYSIWYG in the backend. So a back-end end user would see what the form would (approxemately) look like while edditing the form.

Markus

Hello Markus,

I think this request makes sense, although it will require the end user to put a little bit more work when designing the page. I'll pass it for a discussion.

Dear Georgi

The end-user will only have more work if I create an extra css which he/she has to link.

If Telerik would provide a solution where we designers/programmers could link to an forms.css file (admin - settings - css) and this would be linked automatically when the clients uses a form on a page this would only be a small extra step for us (like registering a front-end theme)

Maybe you have more ideas on how to reduce css, js load on pages where they are not needed.

At the moment for example if you set your own skin in a navigation the baseCss is still delivered (this should be fixed in 4.2) so you get extra KB and one extra request to the server.

SF is usability wise simply the best on the market. Now it should catch up with the speed. And to me front-end is much a bigger issue then backend!

Its like my discussion about ScriptCombining which at the moment looks like a bad idea to me.

Markus

Hi Markus,

I don't know that you would really save in the long run splitting out your CSS files because of the browser cache and the efficiencies of less files.

If you measure the time it would take to download a single combined minified and gzipped css file that is then stored for the whole session in cache versus multiple css files loaded as needed you may find that you aren't actually saving much at all.

It would be worth a look.

For our projects we minify and optimise css and js using squishit and we find it very good indeed.

Thanks,

Seth

**EDIT** sorry read that wrong Webinsite :), True that the Ks saves might not be much, but every new file has overhead to connect back to the server to request the file, then it has to be sent down, and perhaps there's also fns lookup overhead on that too. A browser is only able to download x files at a time (2-6?) so if you have many small files you're blocking other files from coming down faster.