[Zope-CMF] CSS and .js files: where to put 'em?

Shane Hathaway shane@zope.com
Fri, 14 Feb 2003 11:57:02 -0500

Greg Ward wrote:
>   <link rel="Stylesheet" type="text/css" href="styles">
> Yuck.  Is there a good way to keep the .css extension there?  I like
> meaningful filenames.  (I found a bad way: name the file
> "styles.css.css" in the filesystem.  Yuck, yuck, and double-yuck.)

I can't claim it's much cleaner, but one way to do this is to add a 
"styles.css.properties" file with the following:


It's not as bad as doubling the extension.

AdaptableStorage, FWIW, has had to face this same issue.  This time I 
guessed that it's not a good policy to strip extensions implicitly.  So 
now AdaptableStorage allows you to strip extensions, but you have to do 
it explicitly.  I like the way it turned out.

> Another source of yuckiness: this doesn't play nice with caches.
> Documents in every folder of the site will reference "styles", so the
> browser will be stuck downloading the same CSS file using many different
> URLs, and will therefore be unable to cache it.  That doesn't bother me
> nearly as much as the cache-unfriendliness of putting images in the
> skin, but it's still not good.

For images, here's the way I solve the caching problem:

<img src="some_image" tal:replace="here/some_image" />

The tag generated by the image object refers to the canonical URL, so 
caching works as intended, and as a bonus, the height, width, alt, and 
title attributes get included.  The solution for stylesheets isn't quite 
as straightforward:

<link rel="Stylesheet" type="text/css" href="styles.css"
   tal:attributes="href here/styles.css/absolute_url" />

> Finally, does it even make sense to put JavaScript source files in the
> skin?  The obvious benefit is that then they're in the filesystem, where
> all source code belongs.  But presumably I'll have the same problems as
> with .css files.  So should they be in a Zope folder instead (as they
> currently are)?  Anyone have strong opinions one way or the other?

I would put the JS files in the skin, but again, I would make sure the 
href points to the canonical URL using tal:attributes.