homepage Welcome to WebmasterWorld Guest from 54.205.236.46
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
can a css file be too big?
deadhippo




msg:1179812
 4:42 pm on Jun 8, 2005 (gmt 0)

this was a question ive been wondering about for a while
i know that one of the benfits of css is to keep the html down
the more code there is the slower the page loads

well m wondering about css
should i have different css files for different parts of my website or is it ok to throw as much in there as i need..you know different types of pages have different layouts and texts and all sorts of stuff

 

zackattack




msg:1179813
 4:59 pm on Jun 8, 2005 (gmt 0)

Hi deadhippo

Well how big are you talking about..?
Pages that I used to have in HTML with table layout, were coming out at 30-50k, I have managed to strip these down as small as 8-10k by putting all my styles in one external style sheet.

These style sheets range from 5-15k depending on the job. The good thing is that the CSS only needs to be downloaded the once.

You can of course have different style sheets for different pages, but what size are thinking of trying to get down to..?

ZA

thatwebguy




msg:1179814
 5:07 pm on Jun 8, 2005 (gmt 0)

Oh yes it can.

For a web banking system my company makes for Canadian credit unions, I had a very tricky situaiton. I needed to allow us to quickly and easily brand an installation of a client (basically changing the colors and images) but my designer wanted to be able to easily change a LOT of things. So I got tired and simply created a Java Servelet that took a bunch of properties and did a brute force conversion into CSS. This code generated CSS that was about 160k. It didn't bother me too much (it wasn't my bandwidth) and it worked. I wanted to rewrite it from the beginning but my manager wouldn't let me rewrite any of it. Not my best work ever.

Everything was fine... except for one thing. JAWS did some VERY scary things. It was completely dysfunctional in JAWS (in certain situations) which was unfortunate given that we were trying to create an accessible site.

MatthewHSE




msg:1179815
 8:45 pm on Jun 8, 2005 (gmt 0)

My rule of thumb is to keep CSS as small as possible, without sacrificing too much when it comes to ease of maintenance.

For my largest, multi-faceted sites, I try to keep my CSS to 20kb or less, then serve it with some sort of compression so that I only have to send a maximum of 4kb or so. For smaller sites, I can normally keep CSS down to 4-5kb, then if I compress it the download size can often be taken down to only 1kb.

The main thing about a CSS file is that it has to be downloaded first, before any content of your page is rendered. After the first pageview it will be cached fairly reliably; however, that first pageview is your first impression on a visitor and making it as fast as possible is always a good goal.

One way you can sometimes save code is to decide how many "types" of pages you'll have. For instance, my site has some pages with three columns, some with two, and some with only one column. Once you've determined this, choose a CSS id for each type of page. When you create a page, decide what type of page it needs to be, then assign that id to the <body> tag. In your CSS, you can then use the unique <body> id's to target the elements for each type of page you need.

For instance, here's a basic example:

<style type="text/css">
#red {color: #ff0000;}
#blue {color: #0000dd;}
#black {color: #000000;}
</style>

Now say you want a page with red text, just write the <body> tag with the "red" id, like this:

<body id="red">

By using descendent selectors, (#red p.intro { } etc.), you can get very creative with this technique, including layout changes, colors, fonts, anything.

This does result in more overall code for your CSS file, but less than if you tried to achieve everything in a single CSS file without using unique <body> id's. I tend to prefer this method over using several CSS files, as it just makes everything simpler and, with a little practice, doesn't have to bloat the CSS all that much. The trick is to use the unique ID's to make as few changes as possible, just over-write a few values from previous CSS rules.

deadhippo




msg:1179816
 12:46 am on Jun 9, 2005 (gmt 0)

so i guess my 7.5 kb css is not really a problem
i was asking because its getting bigger and bigger and it will continue to do so
so what do you think is a good upper limit?

GreenLeaf




msg:1179817
 4:57 pm on Jun 9, 2005 (gmt 0)


For my largest, multi-faceted sites, I try to keep my CSS to 20kb or less, then serve it with some sort of compression so that I only have to send a maximum of 4kb or so.

What do i need to set up and where to serve my css with compression?
Thanks in advance.

deadhippo




msg:1179818
 5:42 pm on Jun 9, 2005 (gmt 0)

i too would like to know bout this

twist




msg:1179819
 6:18 pm on Jun 9, 2005 (gmt 0)

try something like "gzip compressing css" on google

I went from 4 to 1.5KB

nanotopia




msg:1179820
 7:25 pm on Jun 9, 2005 (gmt 0)

Good advise MatthewHSE, with one exception. In your examples, you don't use functional naming. I wasn't sure if you meant to do that or not, but you should never use a style (like red or blue) for a class or id. It should be functionally named. If you don't, it will bite you in the butt when you want to change that red to a blue one day.

As for the thread topic, indeed a css file can be too big. IMHO, good CSS design should be written as elequently and as thin as possible. Often times, designers can create style bloat. However, with a little work and analysis, you can reduce your code to about 10-25% of the original size.

I generally start big, just to get my design working. Then, I continually take away, and tweak my styles. Tweaking your styles can also involve tweaking your HTML. For example, I was able to save a ton of space on both my HTML pages and CSS by converting my site's layout into a tableless format.

Lastly, search engines like Google care. They will reward you in their serps if you have leaner pages.

twist




msg:1179821
 8:34 pm on Jun 9, 2005 (gmt 0)

This is how I use css, many will disagree but i'm not here to argue about it just let you see another possible way of using css.

I use a non-changing css file and create pages around the static css. I don't create a html page and then create css for that page. I also use a very short naming convention. For example,

t = text, if it begins with "t" I know its for text formatting like so,

.tb{font-weight:bold;}
.ti{font-style:italic;}
.tu{text-decoration:underline;}
.tcr{color:#F00;}

p = padding

.p4,.p4t{padding-top:4px;}
.p4,.p4l{padding-left:4px;}
.p4,.p4r{padding-right:4px;}
.p4,.p4b{padding-bottom:4px;}

bdr = border

.bdr,.bdr_t{border-top:1px solid #F00;}
.bdr,.bdr_l{border-left:1px solid #F00;}
.bdr,.bdr_r{border-right:1px solid #F00;}
.bdr,.bdr_b{border-bottom:1px solid #F00;}

w = width, if number is followed by a "p" it means percent

.w50{width:50px;}
.w100{width:100px;}
.w25p{width:25%;}
.w50p{width:50%;}

bg = background

.bg{background-color:#333;}

This makes my css file very short and reusable on any website anywhere of any size. For example, instead of opening my css file to create a new page with a brand new design I just plug in my css as I go.

<div class="bdr">
<div class="p4 bg">
I learned <span class="tb">everything</span> I know
from <span class="tu ti tcr">WebmasterWorld</span>
</div>
</div>

deadhippo




msg:1179822
 1:12 am on Jun 10, 2005 (gmt 0)

hi twist

what about layout?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved