How to organise Website CSS

Question

I understand the concept of CSS. But on many projects I've found that I tend to lose myself and end up with a millions CSS files for a millions different pages!

I realise that the point of CSS is that it cascades. Otherwise it would just be a style sheet!

I would just like people to shed some light on how they use CSS to its full potential! On my current website I've got a MasterPage and one css file for that. then for all the sub pages i tend to write a separate css for every 5 pages or so. I dont like my css files to be HUGE cos then i just get confused.

How do you do it? I find it hard to comprehend that some people use one css file for the WHOLE website. or is that the done thing?

Answer 1

Script combining and compression on the fly

For .NET I use a somewhat modified CombinedScriptManager which allows me to keep my .css and .js files separated in source and then the scriptmanager grabs them all and then combines them into 1 file and compresses it using YUI compressor automagically on the fly.

I'm sure that there is an open source version of this file, however I can't seem to find it at the moment. It may now be a part of the AjaxToolKit.

• http://ajaxcontroltoolkit.codeplex.com/releases/view/71000

However I'm sure that there could already be something in place for whatever language/framework that you are currently using, might be worth a look around. If not then you have the source above to make a port.

Packing using Nant and YUI Compressor

There are also tools out there that as part of your build script to minify and compress your .css and .js files into 1 file that is served on your pages.

• http://blog.muonlab.com/2009/05/17/using-the-yui-compressor-with-nant-to-minify-css-and-javascript/

Answer 2

Jin Yang, Web Designer for the Stack Exchange talks about unified style sheets in episode 13 of the Stack Exchange podcast. So yes, it can be and is done on a large scale.

Answer 3

You can have as many files as you want. I am always trying to have the same organization as you, that is one master css file, and several "domain" css files. When absolutely necessary I add a css for specific web pages, but it is rarely the case.

The thing to remember is that there are tools to compress your CSS files (and javascript, by the way). Check out for example the following link where he explains how to use ant to compress (minify) your stylesheet and scsript files: http://www.julienlecomte.net/blog/2007/09/16/

Performing such a build will give you exactly on javascript file and one big css file, as if you had only one file. In addition, your stylesheet has been examined and duplications or useless code has been removed.

Answer 4

There are now tools available to organize scripts and stylesheets, what you need depends totally on what development environment you're running it in. What is clear is that you don't need to maintain one gigantic file.

Bundling and minification

In a deployed environment you want to keep the number of requests that users do on a web page as low as possible. The reason for this is that you get faster page loads if less requests are done.

However that doesn't mean that you need to develop it as one file; you can use a build tool to concatenate the source files as one. And once you have a build tool to concatenate you might as well want to minify it (so that it takes less bytes send, which is a good thing).

The easiest way to get started is to write some batch script or a build script that concatenates the files and runs the concatenated file through a minifier such as the YUI Compressor. There might however already exist in your development environment tools that do this already.

Superset languages

Other than that I prefer to use superset languages such as Less or Sass/Compass to create my stylesheets. The extra features you get is awesome, such as: variables, arithmetic, mixins, helper functions. Once you use it you rarely want to go back to write vanilla css. Here the process is the same as above, you compile (or have the tool watch for changes) the source down to the file that eventually will be used.

There are also superset languages for javascript such as coffeescript and typescript that works the same way; augument with new features and compile down to the actual file that will be used by the web site.

My tools

In MVC4.NET I prefer to use the built-in System.Web.Optimizations bundling feature with BundleTransformer so I can use superset languages (it also works in MVC3 but requires some configuration to do). It is pretty much automatic, you can see the actual sources while developing and once the debug flag is unset it will compile and minify the files automatically for production environment.

I also use superset languages in other environments, mostly the ones that are easiest to use:

• nodejs have stylus pretty much natively for stylesheets, and coffeescript is quite easy to get it working
• ruby/rails has sass/compass natively and coffeescript has been supported by the community for a long while

Other tools worth mentioning

• YUI compressor - compresses javascript and css files
• Closure Compiler - compiles javascript

Answer 5

Apart from the combination of files (like the above tools, but @include works too), there is also the design itself that needs to be adapted. I found several things that come up:

1. Using markup that is close to the semantical meaning (ul and ol for lists, proper headings etc), and close to the logical flow of things to make it easier to create a consistent style.
2. Take a careful look at your design - how consistent is your design? (More consistent is usually easier to style)
3. There is usally a distinction between navigation-style and primary content style, you can separate those easily by styling the normal tags to fit your content-style before specifiying actual margin/padding for each element, and then override every tag you need in the navigation by selecting it with the #id. Those elements referenced by id take precedence (regardless of the order they appear in the file.
4. I also use unspecified / classed elements to create useful defaults like *{ margin: 0; padding: 0;} Then I override actual margin/padding per element.
5. You can use multiple classes on elements. So you can do

   and it will do both the styles of .title and .bluebackground

6. Use classes rather than ids as much as you can (because of specificity again)
7. I usually separate the colours from positioning / flow-issues (as colours tend to change more often and I don't want to dig through all the layout things - makes it easier to change colourschemes too)
8. When a style is really needed just once, you can still inline it, it doesn't have to be in the css.
9. CSS is usually the craft of taking things away and trying to simplify and simplify more.
10. And finally: work with the browsers and not against them. Creating a pixel-perfect style that looks exactly the same in every browser is bound to create headaches and lots of css, accepting some of the differences and just focus on the overall functionality (so if a padding on IE is 1 px more or less because it uses a slightly different way of calculating width, so be it, if the overall result still works, doesn't hide or break things and doesn't look ugly, I'll accept differences.)

Answer 6

The easiest way I've found to keep track of CSS files is to have their filename prefix equal to the page or a string description of the pages that use this CSS file. That way the page(s) are close to the respective CSS file just in the matter of alphabetical sorting.

This strategy has made myself, and MANY db developers, keep their insanity. :)

Answer 7

Here. Where I ranted at the ID thing and then basically answered this question:

https://stackoverflow.com/a/12102693/450222

Also, it's okay if it's just a style sheet and doesn't cascade at every opportunity.