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 there in the browser. Is there any size limit on CSS file or on the number of lines?
EDIT: Sorry I forgot to mention that this problem is occurring in Windows 7 both in FireFox and IE8.
Internet Explorer has is said to have a limit of 4096 CSS rules per file. There's a limit on the addRule function that seems to apply to rules applied through a style sheet as well: Reference
Also, it has a limit on the number of style sheets you can embed in a single document. I think it is 20.
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.
What does the CSS validator say about your CSS rules?
Cut and paste the last "ineffective" rules of your stylesheet at its beginning: are some of them now working?
Obvious typo errors can be seen with a good text editor like PSPad, Notepad++, Scite: " ; /* */ and so on. They have a pretty limited scope like ; or are easily seen like a comment not closed. The less obvious one I encountered was not closing a parenthesis:
background: green url(img/dummy_gradient.png left top no-repeat;
Nothing worked till the next ) in my CSS rules 50 lines below!
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".
No there isn't a limit. Probably the file is being cached and that's reason you are not seeing modifications. Try clearing the browser cache or Ctrl+F5.
There is no limit for most normal browsers (as pointed out in most answers). Another very important consideration. If you compress your responses, in Apache I would use gzip or deflate, the file size is reduced dramatically. Since CSS is very repetitive, and for example, in your 5000 lines you use the word "color" 800 times, the compression will only send one instance of the word "color" to the browser with 799 references to the word in the compressed dictionary. So your file may be 88K on disk, but 9K over the wire.
Tools like FireFoxes Firebug are useful to see the compressed file size. I am sure IE has a http header viewing tool.
So to make my point, the 88K is the file size on disk, while, if using compression, you need to consider the file size in the response.
If you're not seeing additions to the bottom of the file reflected, see if you can spot where it breaks and look for stupid errors and mistakes. CSS will fail quite silently, but will still happily work up until it does.
This could be the cause of your worries.
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.
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.
There is of course a limit for what browsers can handle, but it's certainly a lot more than 88 kilobyte or 5000 lines. An educated guess would be something like a megabyte or 65535 lines... You are likely to run into performance problems long before you reach the limit.
The reason that you don't see changes appear is probably caching. You can use Ctrl+F5 to clear the cache for the page in your own browser (as Darin mentioned.)
We rename the CSS file when we publish a new version of it, to be sure that all visitors gets the latest version.
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 . . .
