Jump to content

Is my stylesheet too long?


Fmdpa

Recommended Posts

As I've been building my website, I've slowly built up my stylesheet. It currently is over 2,000 lines long (uncompressed, with proper indentation, spacing, etc.). I suspect it would be 100-150 lines long compressed. Is that going to be problematic for many users?

Link to comment
Share on other sites

Well, it will increase the loading time of your website, though text is cheap. Why does it need to be so long, though? If your website has many different sections with different styling, then you may want to consider separate stylesheets for each section. Additionally, you can probably refactor the styles themselves to make the file much smaller.

Link to comment
Share on other sites

I was thinking of dividing it into different sections too. I may have some unused styles within it that could be removed, but that would likely be insignificant. A significant part of the length can probably be accredited to the many CSS3 properties I use to enhance it. Of course, most of those properties need 3-4 cross-browser statements, which add up. Also, I have a CSS sprite for the navigation bar, which is very verbose. Is there a way to simulate different connection speeds on localhost using some tool (like a FF add-on)? I know firebug tells you the loading time of all HTTP requests, but since I'm working on localhost, those durations are unrealistic.

Link to comment
Share on other sites

Fiddler (see my signature) can look at the total size and make an educated guess about how it would load on certain internet speeds, but keep in mind that this too is just that - a guess.I remember there was a Firefox add-on that showed you the unused and non applied properties, so that you may clean up your stylesheet... ah, there it is.

Link to comment
Share on other sites

Thanks boen_robot, I was wondering about easily determining unused styles also. Dilated, do you know how firebug does it, or if it does?
Firebug will show you all overwritten properties in the "style" window. If you go back and revise some of the rules, you might find that a lot of them are redundant. I guess it won't show rules that aren't applied at all because it can only show the computed rules.edit: How big is your css file anyway? The number of lines means nothing if we don't know how often you decide to wrap a line or how many cols you use.
Link to comment
Share on other sites

My CSS file was 46kb when I checked earlier. I compressed it to around 30kb. Since then I've gone through and removed some unused CSS properties, but I'm only down to 1800 lines. I write my stylesheet in this format:

#single_line_for_the_selectors {	property-name:value; /* one property per line */	property-name:value;	property-name:value;	property-name:value;}												   /*one space between blocks */#single_line_for_the_selectors {	property-name:value; /* one property per line */	property-name:value;	property-name:value;	property-name:value;}

I am slightly relieved as I find out that this forum's stylesheet is 31kb. But dial-up users (few as they are :)) will pay dearly. At least it will, in theory, get cached after it gets loaded.

Link to comment
Share on other sites

i think if you use short hand technuiqe it will reduce your file size more.i think using class instead of ID (as less as possible //if you realy dont need) will help you to short the CSS. i mean styling on class or tag based.

Link to comment
Share on other sites

31kb is still quite big, considering most JS libraries, minified, are smaller than that. If you do write your CSS like that, and assuming you have seven lines per selector on average, that's 257 selectors. Are your HTML documents really that long? Remember you can apply CSS to multiple selectors at once...

Link to comment
Share on other sites

My CSS file was 46kb when I checked earlier. I compressed it to around 30kb.
btw how do you compress it?
Link to comment
Share on other sites

If you haven't done this stuff already . . .One thing to look for are rules (and especially sets of rules) that show up more than once. That's when it is often efficient to combine selectors.Look for the possibility of using your universal selector and element selectors. Like if you have 50 rules defining a background-color as #fff, but only a few elements specify a different background, you could add #fff to the universal, and then you might need to define just a few exceptions.I find that a lot of my input elements need the same rule, like width:100px, float:left, and so on. So, often I define a rule for the input element, and than make changes for the few elements that need a different width or float.Effectively, this changes the default setting, and then you tweak the elements that don't use the deafult. Even if this means so much tweaking that you end up with only a 10% reduction, it still counts for something.You're aware that you can combine classes in an element's class attribute? This can simplify a lot repeated rules. Say you consistently add 5px padding to a lot of elements. You could have a class selector called "pd5" and give it that rule. Then add the class name to an element's class attribute: <p class="something pd5">

Link to comment
Share on other sites

Thanks for the tips everyone!During development, I try to make it as readable as possible. Because of this, I only put selectors and properties on the same line when I have 1 property for that selector. Otherwise, I put one property on each line, as I previously demonstrated.

.selector { one-property:value; }.selector2 {   property:value;   property:value;   property:value;}

I will copy that stylesheet and compress it before putting it online. (there numerous compression tools online if you search)DD, in the example you showed...

<p class="something pd5">

...do the values in the class attribute represent multiple class names? If so, that's great news. I didn't think I was able to pin more than one class to each element.I try to do most of the things you mentioned in your post, DD. I have a universal style for each of my input types, a special style for all error messages, h1-h6 headings, etc. Unfortunately, I still have lots of styles. Most are from positioning or defining the size of elements. My best bet may be to split it up into the relevant sections of the site, as Synook said. As I said, my CSS sprite alone accounts for about 150 lines. But that being said, I think it is worth it, however, because the individual image menu alternative I used to have was much less economical. I've been playing around with Fiddler lately, and I've noticed that GZIP or DEFLATE encoding helps dramatically decrease the size of text files. Using the proportions I've seen, I think I could transfer my stylesheet in an encoded packet of less than 10kb. This may be crossing over into the web servers forum, but how do I implement DEFLATE or GZIP on Apache?

Link to comment
Share on other sites

...do the values in the class attribute represent multiple class names? If so, that's great news. I didn't think I was able to pin more than one class to each element.
Yes, however, I don't think IE6 supports the space-separated aspect of the class selector, but then again, IE6 doesn't support anything.For every other browser, the class selector is equivalent to [class~=classname].So:
p.something

is equivalent to:

p[class~="something"]

Also, 31kb is rather big. I'd really try hard to aim for 10-20kb, un-minified even.

Link to comment
Share on other sites

I've abandoned IE6. Fortunately, I do not work for a company that has proprietary apps written specifically for that browser.Anyway, yes, Fmdpa, as Dilated says, and so far as I know there is no limit to the number of class names you can add to the class attribute. (Though if you're not careful, it could start to look ridiculous.)

Link to comment
Share on other sites

I've pretty much abandoned IE6, as well. I think I'll just try to make the stylesheet as concise as possible, and remove all the redundancies I can find. I'll also split up the stylesheets so that nothing but relevant styles are downloaded to each page. I'll admit my site is very well styled, and I don't really want to give any of it up. :)

Link to comment
Share on other sites

I'll also split up the stylesheets so that nothing but relevant styles are downloaded to each page.
This is not a good idea. Not only does this result in arguably and possibly the same amount of bandwidth depending on if your users look at all the different pages, but it also creates more HTTP requests. Unless the pages you're going to be using the separate stylesheets for are very obscure and won't be visited much, I recommend having everything in one file. Just keep revising your css file.You don't have to compromise the design of your site. When we say try to get your css file smaller, we don't mean you should literally remove aspects of your design. You should be revising the css rules so they're more cohesive with each other. You might be able to turn 4 rules into just 2 if they have shared properties. The CSS rules that style 2 different sections of your site may be able to be blended together.
Link to comment
Share on other sites

I considered having two stylesheets: the global stylesheet (navigation bar, etc.) and the specific ss for the page. Why I would split them up is because my site is mainly two sections: blog and photo galleries. It is likely that any returning visitors will be visiting only one of those categories. I guess if I created more class names I could considerably condense the size of the stylesheet. It will be a long process!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...