MikeBobiney.com Blogging for the fun, the fame and the fortune!

CSS Management Techniques

Idealy, your stylesheets should be done with modularity in mind.  It is not uncommon to find a stylesheet file with hundreds if not thousands of lines of text which all contain the same 6-7 css attributes.  I have two solutions for this problem, one using ASP.NET 2.0 and one without.

My main.css Stylesheet (without ASP.NET)

@import url(initial.css);  /* Default your styles across multiple browsers */
@import url(pages/home.css);
@import url(pages/about.css);
@import url(pages/contact.css);
@import url(layout.css);
@import url(fonts.css);
@import url(hacks.css);

Using this method, you only need to include a reference to one stylesheet which imports the rest into your page.  This way if you decide later that you no longer need an about page for example you can remove that line of code which means your about.css file is no longer being downloaded when your page loads up.  Less files to download equals faster page loads.  Note how each stylesheet serves its own unique purpose.  Also note that the order of your css imports are important because of the fact that you can very well overwrite attributes that were defined previously which is why initial.css is first and hacks.css is at the end.

ASP.NET 2.0 Method

ASP.NET 2.0 has had a feature around since the 2005 version of Visual Studio which is called Themes.  Using themes you can style your entire website using Skin files.  These Skin files consist of a subset of asp.net markup that deals with style properties, stylesheets and images..  One advantage of this method is how with a single reference to your theme in the web.config file of your asp.net page you can import all stylesheet files contained within this folder.  Simply put, you can add add as many stylesheet files as you want in any type of folder structure under themes and asp.net will include them in all your pages.  Pretty niftey eh?