I can’t stand articles that make you read two pages before getting to the point. With that in mind, let’s look at how I think css code should be organized.
In a nutshell: css code should be divided up into at least 4 separate pages:
- page-structure.css
- text-styles.css
- misc.css
- ie-styles.css
How about we call this the ‘killer’ css structure.
Before I go into the details of what each css file contains (if it’s not already obvious), I want to quickly cover WHY you might want to use this basic css structure for all your websites.
Why use the ‘killer’ css structure?
It all comes down to one of the key reasons for using css in the first place:
Grouping code so that it is easier to update and easier to understand.
-
A common mistake
What I see over and over again, are web designers who put all their css code into one css file. This is indeed a big leap forward from using font tags all over your website … but by having only one huge css file, you’ve just created another big messy file to deal with.
To the point
Page-structure.css contains only css that defines the structure of your page. That is to say things like:
- css code that sets whether the page is liquid of fixed.
- css code that sets whether the page is centered or justified left.
- css code that sets up the columns
etc …
I like to put the page structure code in its’ own file because page structure css code is verbose (there’s a lot) and it can get a little black-magical.
What is black-magical css?
We all know that except for the simplest css layouts, it can be a real pain in the ass to get page layout to work in css.
… Especially when floats and Internet Explorer bugs come into the mix.
Anyway, the point is that css for page layout often contains nonsensical (black-magical) code to make it work.
OK, back to page-structure.css:
Another reason to have page-structure.css, is that once you’ve done creating your page structure, you rarely have to go into that code. So why bother having to scroll past it every time you edit other parts of your css?
Personally I find myself tweaking css rules for text, color and images much more than I do page structure css.
Text-styles.css contains css code that only affects text. So I have all my header tags defined along with paragraph tags and classes. Again, when needing to edit some aspect of my text for the hundredth time … I just pop open the very clean and simple text-styles.css.
Misc.css is a style sheet that contains css code that does things other than page structure and text styling. This ultimately is a judgment call, but I typically put in formating for tables, forms, list or special id’s and classes.
IE-styles.css is of course, for your css rules that manage the Internet Explorer bugs. This all ties into the IE Conditional comments strategy.
You may need another ie-styles.css to deal with specific versions of IE. For example, you may have an ie6-styles.css. But thankfully, this is becoming less and less likely since IE6 use is falling fast.
Thanks for reading,
Stefan Mischook
www.killersites.com
Curious as to why you consider separate style sheets to be an advantage over a single style sheet, divided into sections similar to what you suggest? Why would separate style sheets be best practice as opposed to personal preference? (I do see the reasoning behind separate IE style sheets.)
Hi Vicki,
At the end of the day, you must do what is best for you. All working practices and frameworks are just suggested guidelines - IMHO.
That said, I’ve found this method of sub-dividing your CSS rules into logical groups … makes editing CSS easier. For example:
When I am in font/text editing mode, I tend to be concentrating on that aspect of the site only.
… It is rare that I would be editing my text styles while editing my page structure. So by have a specialized style sheet that just has text/font related rules, I find that my work moves faster, since it is easier to find what I am looking for on the less packed style sheet.
I would suggest trying it out and see how it fits. If you don’t like it, use whatever method you prefer.
Hope that makes sense.
Stefan
Using multiple stylesheet files may help organize your code – but it also is killer – it kills (significantly slows) your page load time. Each of those files needs to be requested from the server, putting more load on the server with the extra request. It takes far more time to process a separate request than it does for the server to just return one larger stylesheet. A good solution is to use multiple files (as you suggest) for development, but then combine all into a single compressed file.
“it kills (significantly slows) your page load time.”
Hi,
Though your idea has some merit (at maybe theoretically) … frankly, this is like being concerned about the sugar in your coffee at McDonalds, when you supersize your meal. The sugar in your coffee is NOT the problem!
… The amount of drag the extra style sheets have on a web page downloading is probably not practically measurable. Server request are lightning fast these days - to forgo better structure in code for some theoretical speed bonus is not wise. This is something you learn quickly in software development.
Think about it, we are in the age of Web video and Youtube, is a 5k style sheet going to REALLY affect the server (in the least) given that at the same time, the servers are easily pumping down 50-100 meg streaming video? I don’t think so.
If you want to worry about speed worry about things that really matter:
- images
- video
… Not the css code.
-
This whole myth that CSS will make you pages so much faster, is a myth put forth by a the same bunch who told everyone to use CSS hacks rather than IE conditional comments … and you know of course when IE7 came out, many of the hack broke.
Stefan
Stefan,
The multiple HTTP requests performance hit is explained here:
http://developer.yahoo.com/performance/ - hardly a myth.
What you suggest is a good approach on your pre-production server but if you can take it to the next step by concatenating them for the live server - benefits can be realised. Pros and cons should be thought through on a site by site basis - there is no single right way to approach it.
Regards, Karl
Karl,
I know that multiple HTTP requests to take more … juice from the server.
I’ve developed web applications for years and in many different languages/environments including:
- Java
- PHP
- ASP
- ASP.net
.. and couple of others.
And across all these platforms (given the overhead) I have NEVER seen an HTTP request of a small text file (like a CSS file) have ANY real impact on the resources of the server, or speed of a website.
Think about it, do you really think a 5-10k CSS file is really going to make a REAL difference? Please.
… Especially when you consider that the file will be loaded in cache so it is only downloaded once.
My point is that CSS files are so small, that practically speaking, it is really a non issue for 99.999999999999999% of websites. Benchmark it and come back to me.
“there is no single right way to approach it.”
This I agree with. But again, to introduce differences into the structure of your web site between development code and production code (compressing 3 files into 1) is a bad idea because you are introducing an extra step that is wholly unnecessary.
What you’re proposing is like driving across town to save .$50 on a loaf of bread, when it cost you $6 in gas.
Stefan Mischook
Great advice, Thanks
You definitely need structure to your css files, but I do not believe it necessary to split them into that many files. I often will code elements based on container hooks, so I prefer to have my css divided by those sections, so I can see how things cascade easily.
Hi Stefan,
I will agree with your comments. The file size and server traffic doesn’t matter for CSS file. I am thinking to use your CSS structure for my upcoming projects.
Great Structure!!
–Venkat.
“it kills (significantly slows) your page load time.”
You’re really correct…
I liked this separation. But… why not do this “separation” into a single file commented?!
The server hits important, and a dedicated developer should consider it. This is much important, specially in greater sites with heavy accessed. This is better for users and to company.
But, anyway, this theory of organize code is good. A good idea for the chaos of coding! Only the use of many files must be better considered.
“I liked this separation. But… why not do this “separation” into a single file commented?!”
Because I don’t like scrolling too much.
The whole notion that two extra css files are going to have any real impact on a web server is a little silly. Especially since the files are actually downloaded once and then are stored in cache.
Stefan
Structuring a Stylesheet is a good idea but I also dont like the idea of separating styles onto multiple files (only is-specific hacks should have their own home).
I did this a wile and I constantly found myself searching for the right css rules in the files. So I went back to one file an startet using comments to separate blocks of rules (a.e. for one page).
There is an interesting idea of using javadoc style comment for css files: http://phpugffm.de/index.php/javadoc-for-css,2007-05,204.html
To avoid scrolling I use shortcuts at the bigging of each section like this “=L” for common link styles. So I can use the search functionality of my editor to find the blocks quickly.
@Kai,
Interesting comments with regards to your own personal experiences.
… I prefer debate based on fact than on dogma.
Anyway, your point has merit and I think that it is probably suitable for many projects. In the end, how you go about creating those distinct chunks of code, is up to you and how you like to work.
I just wanted to push forth the idea of creating those manageable chunks.
That said, I’ve found a separate CSS files very handy in my work-flow.
Another use of an separate CSS file would be to place experimental CSS code. This way, if you wanted to rollback to a previous working version, you need only delete whatever you have in the experimental style sheet, knowing that your original code is safe and sound in the core style sheets.
Stefan,
I find it interesting that you outright dismiss the suggestions that multiple CSS files will have an adverse effect on performance. Yes, CSS files are small, but that is not the issue. The issue lies with the number of concurrant requests a given browser will make.
To respond to your ‘Benchmark it and come back to me.’ comment I recommend the following article:
http://www.die.net/musings/page_load_time/
I can’t claim credit for it myself, but it’s very well researched and provides some extremely useful information. Most notably (for this discussion) the following finding on improving page load performance:
‘Load fewer external objects. Due to request overhead, one bigger file just loads faster than two smaller ones half its size.’
I wholeheartedly agree that CSS separation like you suggest can be extremely helpful to the developer but to claim that many files will perform in the same manner as a single one equalling the same total size is simply a falsehood.
“‘Load fewer external objects. Due to request overhead, one bigger file just loads faster than two smaller ones half its size.’”
This is true.
It also true that if you have no sugar in your coffee, it will save you a few calories when you go to McDonalds.
That said, css files are still not very relevant compared to other things (images, flash movies) in a web page, when it comes to saving bandwidth and download times.
That is the core of my argument:
compressing code is not where the big gains are in terms of download speed. Furthermore it is also better to have cleaner, easy to organize code, than faster code.
Case in point: killersites.com’s home page. I use 4 css files and according to external measures, the site loads faster than 70% of websites on the Web.
Hi,
I just wanted to clarify one point:
Though I think having a few css files to keep your code clean is smart web design. I think that you ought to not go crazy and have 10-20 CSS files. Try keeping it under 5.
As usual, always test to see what happens.
Stefan
Hi Stefan,
I agree with your style sheet separation/organization. I’m currently working on a site with two other individuals. If we were all three inserting code into the same style sheet, the whole file would become cluttered and unorganized. So, during the construction progress, we have our own separate style sheet that we work in to keep everything organized. This keeps confusion down between the three of us, as we know what page each other is working in, and we are able to determine what style sheet the problem lies in, instead of scrolling through one big file searching for the problematic code.
Seperate style sheets are the way forward. I put all my ajax stuff in one sheet, page layout in another, and misc stuff in another.
My pages don’t suffer any slow down even when tested on a slow connection.
External objects should be kept to a minimum especially when they are big files.
Don’t believe everything you read on the internet.