is there any limit on css file size?

Question

I am using ASP.NET MVC to develop a site. The CSS file has grown to 88KB and is having a little more 5,000 lines. I noticed recently that styles added at the end are not the

Answer 1

There might be in some browsers (I’ve not heard of one, but it’s possible), but 88 KB is absolutely fine for a CSS file.

Answer 2

I think that if you are having problems with the size of your css files then it is time to rethink your styling strategy. The C in CSS stands for cascading. Quite often when CSS files get too big it is due to styles not being re-used where appropriate and through poor use of the cascading behaviour.

I don't say this lightly. I have worked on some large, complex retail sites and currently on very complicated financial trading applications. Whenever I have come accross sites with more than a few hundred styles, we have achieved large improvements in design, reductions in complexity and improvement of maintainability by reducing css complexity.

One place to start is doing a Google sesarch on css reset. There are multiple different implementations, but they generally follow the theme of overriding the differences in layout for each of the browsers and removing arbitrary borders, margins and padding etc. Starting with a clean slate, if you will. Then you can go ahead and build up your styles from there, being careful to make the most of cascading and css chaining

Chaining is where you have more than one class on an element. eg:

<div class="box right small"></div>  

box might have some general styles that you might like to apply to many block elements such as div, h1...h6, p, ul, li, table, blockquote, pre, form. small is self explanatory right might simply be aligned to the right, but with a right padding of 4px. Whatever. The point is that you can have multiple classes per element and build up the styling from reusable building blocks - groupings of individual style settings. Otherwise known as classes.

On a very simple level, look for oportunities to combine styles:

so:

h1 {font-family: tahoma, color:#333333; font-size:1.4em;}  
h2 {font-family: tahoma, color:#333333; font-size:1.2em;}  
h3 {font-family: tahoma, color:#333333; font-size:1.0em;}  

becomes

h1, h2, h3 {font-family: tahoma, color: #333}  
h1 {font-size:1.4em;}  
h2 {font-size:1.2em;}  
h3 {font-size:1.0em;}  

Only, slightly smaller, but do this kind of thing lots of times and you can make a difference.

Also, Validate your css. This will help you spot errors in your code.

Answer 3

Your question is:

Is there any size limit on CSS file or on the number of lines?

The answer, for IE9 and lower, is yes, depending on what you mean by "lines" and "size limit".

1. Size: the max size style sheet that IE9 and less will read is 288kb. Any styles after that mark do NOT get read. Read this article by Joshua Perina for a little more info on this.
2. There is no max on the number of lines in a style sheet that I'm aware of. There is a max on the number of selectors. IE9 and lower stops reading (and may not even load a file, that info seems to be up in the air) at 4095 selectors per style sheet. (see linked article below)
3. If by "lines" you mean how many lines of @import linked style sheets you can add per file, you can have 31 max style sheets imported in. Each stylesheet can have 31 max @imported style sheets. (see linked article below)
4. @import nesting supports up to 4 levels deep.

This article on MSDN talks a little more about the max selector and linked style sheets, and how they came to those numbers when developing IE.

Answer 4

Theoretically, there isn't a limit.

Practically, most normal browsers (FF, Chrome, Opera, Safari) can handle whatever you throw at them. Some of the older and/or mobile browsers however (Access NetFront, for one - bundled with many mobile phones) run into problems with largish pages (about 100KB and above) and throw all kinds of errors.

TL;DR: No, unless you're trying to support all kinds of weird browsers.

Answer 5

Have you validated your CSS? Some browsers will include styles up to the point of a syntax error (or certain syntax errors) and then effectively truncate the file for you, leading to just this behavior.

I'd also vote for refactoring your CSS, you can probably get away with a bit less . . .