[thelist] a couple of quick questions regarding web page size/CSS

Sam Foster sam at sam-i-am.com
Thu May 5 23:19:50 CDT 2005


Bruce Gilbert wrote:

>hello,
>
>regarding web page size and CSS,
>
>1) If you are linking to a CSS file from a web page, is the size of
>the CSS file included in the overall page size?
>
>2) What is the *optimal* size for a web page (quick loading).
>
>3) Is there any kind of tool that will delete elements from your
>stylesheet not being called?
>  
>
yeah, this is the pitfall with abstracting the style out of your html - 
if you are not careful you can easily end up with a 30k+ stylesheet that 
needs linking/importing from every page. In practice you only get the 
download hit once and thereafter it should be cached, but if you are 
measuring page weight, it does need to be included. However, the user 
will probably get hit with it on the home page - which is where you'd 
prefer load time to be snappiest to make the best impression.
You can divide up your css in a number of ways. One effective way is to 
look at your page types, and write or seperate out just those rules that 
pertain to each page type into their own file (e.g. home or portal.css, 
listview.css, detailview.css, article.css etc.). Shared, truly "global" 
rules can be @imported at the top of each.
You may have overlap nonetheless which presents a maintenance problem.
The other thing is to distinquish between global styles, shared styles, 
page-specific styles, and element-specific styles. Here I'm sticking my 
neck out. I think that if a property you want to set is specific to just 
one element, it belongs in an inline style attribute on that element. A 
classic example is doing form layouts where you need to specify a width, 
but there might be so many variations that any abstraction you do is 
meaningless. 
Likewise, if you have rules that pertain to just one page, go ahead and 
put them in the style block in your head. Shared rules belong in one or 
more @imported or linked stylesheets. Your global CSS is just that - the 
very fundamental rules that are common to every page on your site.

CSS has all the same dilemnas as any other language where you are 
constantly deciding how to acheive code reuse, what is shared, what is 
not etc. Unfortunately we don't have a compiler to trim out the fluff 
for us and it all gets sent to the client whether is necessary or not, 
so it falls to us to be diligent.

I think your question about a tool to optimze for you would be a good 
one for Nick Bradbury (author of Top Style Pro)
Wasn't he on thelist at some point? There would always be cases where 
you could miss a dependancy introduced by some script (or serverside 
process), but 99% of the time simply matching up selectors in the 
stylesheet to markup in a page or section would work just fine. Except 
simply is not really so simple, but you get the idea. There's a perl CSS 
parser module on cpan that I played with a while back so I might tack 
this onto my projects list too. (in addition to a javascript parser, and 
a range of HTML parser options)

Sam



More information about the thelist mailing list