PDA

View Full Version : CSS file breakdown



nealrm
02-15-2009, 12:29 PM
Is it better to have one large CSS file or several CSS files?

vangogh
02-15-2009, 12:39 PM
Depends on how large and how important it is to keep the information in each file separate. It takes longer for a single file to be downloaded into the browser the larger that file gets. On the other hand each new file is a new request from the browser to the server which also slows up load times.

I think 4kb is the line where if you go over you're essentially making a new request since 4kb is all that's getting transferred in one packet and one 5kb file or two files at 3kb and 2kb ends up being mostly the same in terms of load times. Don't hold me to that though.

In general when I build a site I try to keep things in one external css file. I can usually keep that file pretty small too. I might also have one or more IE-specific css files as well. It can become more complicated though if you use something like WordPress or another CMS that allows plugins or modules or whatever they get called. Each could potentially have it's own css file and those are usually best to keep separate or it can cause problems when updating.

rezzy
02-15-2009, 11:45 PM
I usually use one. I think its most important for your sanity. When breaking down the css file into different parts can help with organization. You know this file has text tags, etc.

I dont use them that way, but that is one argument for them.

orion_joel
02-16-2009, 12:03 AM
Don't forget you can comment in a CSS file, so you can define parts of the file. This is a way to help break it down in a single file. I think you would really have to have a lot of styling to actually get to a point where multiple files is good. Or maybe consider different files for different pages, if some pages have seperate styling.

vangogh
02-16-2009, 10:29 AM
I usually do my best to keep my css organized, but there are reasons why you might choose more than one file. For example I know some of my clients want to be able to make changes on their own, but I also know there are lines of code they'd be better off not touching.

In that case I can leave the stuff they shouldn't edit in one file and move the stuff it's ok for them to edit in another file. You can essentially do the same in a single file, but sometimes a second css file might make more sense.

That's just one reason why you may go with 2 files.

Marcomguy
02-18-2009, 03:35 PM
My site uses Stone Age methods like tables, with no CSS. At one time I had heard that IE didn't respect CSS, which was the main reason I stuck to tables.

Are there still any problems with IE's rendering of CSS?

rezzy
02-18-2009, 03:53 PM
My site uses Stone Age methods like tables, with no CSS.
Say it aint so!



Are there still any problems with IE's rendering of CSS?
The short answer is yes. With newer versions of IE those problems are becoming reduced.

The benefits to CSS are many and the cons are few.

I noticed your blog is using CSS and it dosnt appear to be falling apart. ;):D

billbenson
02-18-2009, 05:02 PM
In addition to what Rezzy said, if you cut over to CSS, test your site in IE6, IE7, and FF. IE6 may pretty much be going away but enough people still have it to merit testing to be sure it works IMO. But, yes, its time to move away from tables.

Marcomguy
02-18-2009, 06:17 PM
Thanks for the responses. CSS it is.

rezzy, the blog is a Wordpress template, so I can't claim any credit for that. The site, on the other hand, was hand-built through experimentation, frustration and long hours of having my eyes super-glued to the monitor. :)

vangogh
02-18-2009, 06:40 PM
IE doesn't quite do all the css that other browsers do, but it does a better job than most would have you believe. There are a few things that frustrate developers though. I can't remember that last site I built where I didn't curse out IE at one point or another, but in all honesty it's not as bad as many make it out to be.

nealrm
02-18-2009, 06:54 PM
In addition to what Rezzy said, if you cut over to CSS, test your site in IE6, IE7, and FF. IE6 may pretty much be going away but enough people still have it to merit testing to be sure it works IMO. But, yes, its time to move away from tables.

Use also need to check it in IE 8. Not many users there yet, but there will be soon.

billbenson
02-18-2009, 07:07 PM
Are you talking IE 6, 7 or all of the above VG?

rezzy
02-18-2009, 09:34 PM
rezzy, the blog is a Wordpress template, so I can't claim any credit for that.

I gathered that the site was wordpress template, I meant it as an example that CSS can be cross browser compatible. Even though browsers may see it differently those issues are being sorted out.

CSS will have you pulling your hair out and the like in the beginning. It takes time and patience to figure out how to get something to play nice.

vangogh
02-18-2009, 09:39 PM
Bill I guess I'm talking about all since IE6. Yes they all frustrate me, but in reality I generally only need a few lines of IE specific css to make things work. I think some of it is I've learned what to stay away from over the years and what potential issues I might face.

I'll generally develop in FF and then check how things look in IE at some point. I used to check while I was developing, but I've gotten to the point where I don't really need to till I'm done. Then I check IE (7, then 6, and now 8) and can usually fix any issues within a few minutes. I set up an IE specific stylesheet (sometimes another for IE6) and use conditional comments to serve up those extra stylesheets. Sometimes I don't need them at all, but when I do it's generally less than a half dozen lines of css

billbenson
02-18-2009, 10:33 PM
Out of curiosity, can you run IE 6, 7, 8 on the same machine? I've only had ie6 because my computers are win2k and you can't put IE7 on 2k. I just bought 2 copies of winxp. Its required to run quickbooks. MS has been slowly forcing me into upgrading from 2k I've been checking IE 7 on my wife's laptop.

vangogh
02-18-2009, 11:03 PM
You can, but it's a bit of a pain. The easy way is to download IE Tester (http://www.my-debugbar.com/wiki/IETester/HomePage), which essentially lets you run IE from 5.5 up to 8 beta

nealrm
02-19-2009, 07:35 AM
You can, but it's a bit of a pain. The easy way is to download IE Tester (http://www.my-debugbar.com/wiki/IETester/HomePage), which essentially lets you run IE from 5.5 up to 8 beta

Vangogh, Using virtual PC it's really pretty easy to run IE6,7 & 8. I have IE6 & IE8 running on two different VPCs and IE7, FF and the rest running native. All it takes is downloading the Virtual PC program from Microsoft (It's free) and two more downloads that contain the IE6 and IE8 virtual drives. It also has the benifit of being able to see you layout in different screen resolutions.

rezzy
02-19-2009, 09:22 AM
True, but running all those takes up system resources. Where instead, he is just running the browser. I actually dont use that program and can use all browsers natively.

The program escapes right now.

billbenson
02-19-2009, 09:42 AM
Bookmarked that page VG. I'll give it a try next time I need it.

I tend to keep an awful lot of stuff open on my pc. some are resource hogs. I tend to stay away from that if possible. Three computers in the house. Wife has IE 7. I have 6 on one. Guess I could install 8 on the other. Like VG I do development in FF so it's just at the end when I would test in IE.

vangogh
02-19-2009, 11:38 AM
Interesting Neal. I hadn't realized about the virtual PC. Do you have a link to it?

I came across IE Tester as a recommendation on another forum and it's really easy to use. You launch a simple browser program and then load tabs for each version of IE. I still check in whatever native version of IE I'm running as well.

Currently I'm on a Mac and using Parallels to run both XP and Vista virtually, each with a different version of IE running natively. In time I'll ad a few more operating system/browser combinations to the mix. I have iso images for Ubuntu and Windows 7 beta waiting for me to find the time to install them.

kml9870
02-19-2009, 12:08 PM
Here you go: Virtual PC 2007 (http://www.microsoft.com/downloads/details.aspx?FamilyID=04d26402-3199-48a3-afa2-2dc0b40a73b6&displaylang=en).

I've used it for years. It's great to simulate how someone else messed up their machine and are 2000 miles away and want you to fix it over the phone :p

vangogh
02-19-2009, 12:52 PM
Thanks Kandi. I'll have to check Virtual PC out more and see what I think.

nealrm
02-19-2009, 01:39 PM
Vangogh,
Here is the link to the virtual drives. They have an operating system (XP) and IE already installed. Once downloaded and installed, point a VPC towards the drive. Not sure how this will work on a mac. It work good on a PC with plenty of hoursepower.

http://www.microsoft.com/downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&DisplayLang=en

PS: for those running Vista 64 and needing a Cisco VPN connection, this method will also work. Just use one of the XP operating systems.

Marcomguy
02-19-2009, 02:25 PM
I gathered that the site was wordpress template, I meant it as an example that CSS can be cross browser compatible. Even though browsers may see it differently those issues are being sorted out.

Understood - good point.


CSS will have you pulling your hair out and the like in the beginning. It takes time and patience to figure out how to get something to play nice.

Ah, time and patience. Two qualities in short supply. :D

vangogh
02-19-2009, 07:38 PM
Thanks Neal. Bookmarked your link as well for later perusal.