How long your .css files are?

Inspired by RyanReese’s post:

I started to think how big/long my .css files are?

I’m actually working on my portfolio (looks pretty simple, but I’m using huge amount of JavaScript and jQuery) and the .css file is about 500 lines long (excluding reset.css). CSS3, optimized (using the latest selectors etc.).

Another one from my latest websites - small company’s site is also around 500 lines (not optimized yet).

I know that’s not too important, but as a perfectionist I’m curious how long your css files are?


Depends on how big the site is, but I do go well over 500 lines on some sites, although I do break each declaration into a separate line, which I’m reconsidering at the moment.

I prefer one style sheet over multiple ones, but I know others have a different approach.

In the end, I would say it’s not so much about how many lines of code you have, but about the size of the CSS file in KB. I’ve heard some opine that you should aim for a maximum of 12KB for the CSS file, but I don’t know how many people subscribe to that view, and I know many style sheets go over that.

EDIT: regarding long style sheets being hard to manage, I find that using a tool like Firebug makes it easy to find the relevant line for each declaration, so I never have trouble finding the right place in the style sheet (as long as there are line numbers in the editor).

How long your .css files are?

Good question :scratch:

I’ve never really thought about it that much before.

Just having a quick look around the one I have created recently (for completed websites), they are typically between 500 - 700 lines and 10-15kb in size.

I put each style declaration on a separate line as well - mainly for ease of readability.

Managing the stylesheet is easy. I use Netbeans as my IDE and when I open a stylesheet it displays all the selectors in alphabetical order in the sheet’s navigation window no matter what order they are in in the stylesheet - although I try to place them in alphabetical order as much as I can.

To me, file size is almost irrelevant except in extreme cases. I’m far more interested in being able to navigate through the CSS file with some facility. I’ve seen a bunch of techniques on how to structure CSS files for ease of use (I’ve listed some of them here), but I find that the best way for me to handle my sometimes-large and complex CSS files is to structure them the same way every time. That way I know what’s going to follow what and I can work a bit more efficiently. :twocents:

I agree with Black Max. Of course are there may ways one could structure his/her stylesheet, but at the end it should be something you feel comfortable with, no matter what anyone else say.

They are as long as they need to be to get the job done. No more no less :slight_smile:

Of course you want to rationalise as you go and not duplicate common styles but the css will need to be as long as it takes to get the job done. If that’s 500 lines or 2000 lines doesn’t really matter as long as the css is optimised as best you can and isn’t wasteful or badly written.

If the css is getting very large then it’s probably time to re-think the design a bit (if that’s within your remit).

I have worked on some very large sites where each section is vastly different from what went before with only a few common elements between them. In those cases I split the css files into each section rather than having one massive css file. I separate the common elements into a structural file and then have section related css.

I don’t always agree with loading all the css for the whole site (on a very large site) as that makes the user wait too long on first page load and you never get a second chance to make a first impression.

Also there’s no point in trying to shave off 1 or 2k from your css file if you have about 500k of images scattered around the page when optimising one of those images would save more k than the whole css file.:slight_smile:

On average, and not counting my comment on or spacing lines 80-120 lines. I don’t know if that relates to what you are asking. I dont press return between declarations tho ( I hate scrolling) and I tend to group my rules a lot ( ie .: #head, .somerule p, li a, .somediv li a: hover{color:red}.

I dont think it’s something to worry about tho. For example I group certain rules because I am really being an Art Director … #head, .somerule p, li a, .somediv li a: hover{color:red}, really means that I want the text of #head, .somerule p, li a, .somediv li a: hover to MATCH. As each rule name may be to be repeated here and there for other things , it may take less characters to make each, color declaration for example within its corresponding rule BUT then that means if you change the color… you now have to hunt down each rule. I f you just wanted to separate #HEad from the others , for example… you can look for the color and take #head out… poof! that is worth a few extra bytes