View Full Version : css question

01-05-2008, 10:23 AM
maybe a silly question but how big do u recommend that css file is?

As im using div's my css file is already up to 40kb, and im half way through to finish my design.

should i reduce it or what would be the max. size that u recommend?


01-05-2008, 02:21 PM
IMO 40kb is acceptable but it is quite big though
Try eliminating white-spaces - use the short methods to write your css
example: don't use > padding-right: 20px; padding-left: 10px;
but use > padding: 0px 20px 0px 10px;

Depending on your website structure, you could also think about dividing you css file into parts for each section of your website (loading only css that is needed for each part)

01-05-2008, 04:03 PM
thanks for the answer..

yea the padding-left, etc..would definetly reduce the size at least for a few kb :)....

so, if i keep the .css file below 50kb, this shouldn't be a big problem for users?

01-05-2008, 04:49 PM
I've never really had such a large CSS file. Although this wouldn't pose a significant up in loading time--the file gets cached--I'd like to see your CSS.

01-05-2008, 05:37 PM
That's a lot of CSS, and I too would like to see it. Must be quite the layout. To answer your question, 50k isn't too bad, considering most people have high-speed internet, and the ones still on dial-up are used to things loading slow. And even then, the css file gets cached. There's probably several things you can do to reduce the size though. I'll give a few examples:

1. Like Arnaud said, eliminate white spaces. for example:
#element {
margin: 10px;
font-size: 0.8em;
color: #000000;
could be:

2. Combine multiple properties into one declaration:
background-color: red;
background-image: url('bg_image.gif');
background-position: 50px 50px;
background-repeat: no-repeat;
background:red url('bg_image.gif') 50px 50px no-repeat;

There are several single declaration shortcuts like this, and they can reduce the file size a lot if you haven't been using them. Everything from margins and paddings to fonts and borders have one delaration shortcuts. Quite a few examples here: http://www.w3schools.com/css/css_examples.asp

3. There's a couple of ways to simplify things like margins and paddings. Arnaud mentioned one. Another would be:
margin: 10px 0px 10px 0px; simplified to margin:10px 0;
It wont cut you down much, but it's a good habit to get into.

That's just a few things you can do, there's probably more people will point out if you show your CSS.

01-05-2008, 05:48 PM
thanks for the input...
i'll use shortcuts in future now :) im sure i will reduce the size of the file...

the original css file si from candypress e-store, so im just rebuilding the layout for our store.
i noticed in my css that i made some classes / id's, which could be combined into 1 and be used on all pages or at least in a few. what i did is, that i made new class for almost each page and just renamed the class or id..silly i know :)
well every1 has to learn it oneday heh :)

will have some work to do now, to try to make clean css file, but im glad u gave me some pointers :)

will have to read the css examples more closley not to make more mistakes in my design