Forum Moderators: not2easy
My most advanced CSS is only 4.17kb.
Still, I'm not overly anxious about deleting spaces. My CSS is easy to read and follow, without making the file huge.
A key to keeping the file size down is to not apply a rule unless it is absolutely necessary to make the page load properly. Make use of shorthand declarations, inheritance, and default values as much as possible.
My CSS to HTML ratio is about 1:3
My CSS to HTML ratio is about 1:3
Is there a tool like Brett's Web Page Size Checker that you use to determine the ratio?
One site that I really like is cinnamon.nl. A very good use of css, try looking at it in NN4 vs. Moz or something similar. Good stuff, no? Now have a look at their css file:
25k!
Big.
Can you load a new stylesheet on the fly without it first coming in along with the original page?
Yes you can using javascript. (Will work with NN7/Moz/Gecko, IE5+, and Opera 7.) Requires the right level of DOM support.
There may be thread about that somewhere on webmasterworld.
If not, let me know and I'll post a sample.
Nick
Home page HTML: 3539 bytes
Global CSS file: 8569 bytes
So I guess my CSS to HTML ratio is about 2.4 : 1
I don't think it really matters how big your CSS file is.
What really matters is the total size of the page.
css_builder.htm
----------------
This page outlines a method for building and debugging style sheets using two external style sheets. The first stylesheet contains the initial "base" code. The second stylesheet is used to add rules as you go along. At the end of development, the two stylesheets can be combined into one and the debug functions and links removed from the page.
Clicking on any of the links will copy the needed code to the Windows clipboard to insert into the page. (Remember to take everything out when the page is fully styled!)
1) Create two stylesheets - baserules.css and newrules.css.
2)Add these two link elements into the head:
<link rel="stylesheet" id="baserules" type="text/css" media="screen" href="baserules.css">
<link rel="stylesheet" id="newrules" type="text/css" media="screen" href="baserules.css">
2) Add this function into the head.
function addNewRules(newfile) {
var _x = newfile + '?' + Math.random().toString().slice(3,9);
var x = document.getElementById('newrules');
var y = document.getElementById('baserules');
var _q = y.getAttribute('href');
var _z = x.getAttribute('href');
if (newfile == "baserules.css") {
x.setAttribute('href',newfile);
y.setAttribute('href',newfile);
} else {
x.setAttribute('href',_x)
y.setAttribute('href','baserules.css')
}
}
4) Add these links somewhere into the body text of the page you're styling. (So it blends right into the existing text on the page.)
<a href="javascript:void(addNewRules('baserules.css'));">Base Rules</a>
<a href="javascript:void(addNewRules('newrules.css'));">New Rules</a>
--------------------------------------------------------
- end css_builder.htm -
This technique applies the stylesheets in two ways - the first is only the baserules.css sheet. The second is baserules.css cascaded with newrules.css. However, with just a little modification you can have it load baserules.css OR newrules.css.
You could also add more stylesheets to the mix if you want.
Like I said, there's a lot of variations.
Take a page, any page, add in this code rename the stylesheets accordingly and check it out.
Happy to explain anything about it that's unclear.
rich
I'd say 5K is too big. That's just me though. If you're trying to do too much with CSS it becomes apparent in its file size. If you're one of the few people that has a stylesheet above 10K a site redesign is a must using fewer styles and uniformity across the site to ease not only the user experience but design as well.
My current stylesheet for my personal site is 1.46 KB but I've written some that have been pushing that 5 K limit I try and set.
Although I agree with you, 5k is a nice limit, If you're over that it may not be that you are trying to do too much.
I just went through and dropped the screen file for a site I'm working on from 8.75k to 4.66k. First eliminating comments, then grouping, then whitespace, and finally line breaks. I kept a backup for each stage, just in case ;-]
RicFink: gonna try your snippet - fun.
LisaB
Any stylesheet specified within a LINK tag is going to get requested as the browser parses the page.
This includes sheets specified within a LINK tag having the media=print attribute, as well.
(Theoretically, you should be able to apply a print stylesheet to the document by changing that attribute to media=screen using javascript.
In fact, I seem to remember trying that out - to provide a page level print-preview button or something - but as usual had trouble with cross-browser support.)
using javascript...trouble with cross-browser support.
Hmmm, I'm sure you could 'step-over' having to download the extra sheet with php as well...thus avoiding the c-b-b-s.
However I am somewhat surprised about the (soft) limits about filesize you are discussing. I'd say it totally depends (well, that's a great answer isn't it :D), but I'd have no problem with CSS files even larger than 25k. What's the drawback? They usually get cached anyhow by the browser.
What I'd stuff in there? Well, whatever I needed *G* When I first started with css I would do everything with classes, which I'd use globally across files and different elements. However after having seen a few visually very appealing graphically oriented CSS-styled sites and studying their code, I started understanding what possibilites you really have when you go with id (ok, you could do it with unique classes, too, but ids are better semantically IMHO). Now I am playing with that for a new site. When you 30 or something pages, and you want to move a lot of layout-control over the CSS-files, you'll gather quite a few ids. Add to that general styling of standard tags, classes, commenting, a few ugly hacks... you'll get quite a few kbs really fast.
And like I said, I really don't see anything wrong or problematic with it.
The maximum transmission unit (MTU), or the size of a packet, is typically between 576 and 1,500 bytes depending on connection speed.
The result here is that be careful, because if you choose an arbitrary number like 5k, you're giving away (on a high speed line) 540 bytes of empty space in the 4th packet that is used to send your file.
Think of it as some free space then to muck around and add a bit more spice to your site if you've got the room, or, cut down to the next packet size limit.
[edited by: Nick_W at 10:14 pm (utc) on May 25, 2003]
1. The book is called Speed Up Your Site.
2. WRT packet sizes, I think that what I wrote could be mis-interpreted:
High-speed packets run about 1500 bytes.
For the first packet, you subtract the header and tcp/ip overhead (40 bytes).
Subsequent packets subtract only the tcp/ip overhead...
So, assuming a 400byte header, a 5k css file will go 'down the pipe' as follows:
1.16k in the 1st packet, another 1.46k in the second packet, another 1.46k in the third packet, 1.46k in the fourth, then in the fifth packet, you would send along the remaining 0.91bytes, leaving 550 bytes of space empty.
