CSS / JS "Minification"

[Medianomaly]

Hi all,

Has the possibility ever been discussed of combining and compressing CSS files entered through the "Style Sheets" module upon serving a page? Something like minify? (http://code.google.com/p/minify/)

Here's why I'm asking: Currently site templates are nice, modular chunks of HTML code -- makes it very easy to find and edit them when needed. I would like to do something similar to my CSS -- basically I would create a series of empty CSS "skeleton" files that correspond to each template I want to customize -- making them tiny, modular, and easy to find and edit what I need as well. When it comes time to deploy Typolight on a new site, it would be a matter of including the relevant CSS files and filling in the "skeleton" with properties.

Obviously this isn't practical when you consider I could have 20-30 CSS files when all is said and done unless a technology like this would be implemented.

Similarly, has the idea ever been brought up to create a back end module that is similar to the "Style Sheets" module, but for JavaScript files instead? Maybe it would be called "Behaviors" and essentially let you create and manage external .js files that you custom code. You could tie the inclusion of these files to certain page layouts like you would with style sheets. And again utilizing the same "minify" type of technology.

I understand that some would argue the idea of dividing CSS or JavaScript into mutliple files isn't necessarily good practice, but I also thought a lot of that was just due to server requests. I think in a context like this such an idea could actually work very well -- I'd love to hear your thoughts!

Thanks!
Brian

[Ling]

Hmm. sounds like a very complex thing. Especially with that skeletons you mentioned .
I have to admit that didn't really get what you exactly meant with that. Some kind of snippets?

But an extension could be build that runs that minify thing hand in hand with the caching mechanism of TL (theoratical).

[Medianomaly]

As far as the extension would be concerned, it would only involve using a system (Minify was an example) that would compress and compile all style sheets included in $this->stylesheets into one file before serving it to the browser.

The rest was just talking about the implications. Aside from the obvious benefits of having one compressed style sheet instead of several separate ones, it would allow a developer to maintain a bunch of smaller CSS files for their project, keeping them modular and more manageable. So in addition to having a separate .tpl file for each feature of my project, it could also now have an accompanying CSS file with the rules to display it. So maybe I'd have a news.css, events.css, catalog.css. And I could do so without worrying about the implications of having 20 or so CSS file includes in my page.

Inside those files, I would have a "skeleton" of rules set up (I would manually create this -- the extension wouldn't do it) that I could just fill in to control display, i.e.

/* inside news.css */

#news {

}

#news .date {

}

#news .headline {

}

/* etc. etc. */

Depending on the project, I would just drop in the CSS files I need and fill in the "skeleton". I think this could streamline workflow a bit, but I can't say I've actually tried this out.

Maybe this should be a separate topic, but then at the end I mentioned the possible usefulness of an extension that is VERY similar to the Style Sheets module, but for JavaScript (and maybe called Behaviors). It would allow a user to add/edit/manage .js files for any custom scripts they want to include in their project. It wouldn't need the advanced editing options of the Style Sheets module -- editing would just open a code editor. But it would also incorporate the idea above so all these .js snippets would be compiled into one before serving.