While planning for an upcoming project at my workplace I’ve had to think about developing a CSS strategy for a web application. I’ve never spent so much time thinking about the presentation layer since we are generally more concerned with the business logic and the back-end but this time we need to create a site that is very different from previous projects that we’ve done.

So the idea is to create a web site that uses the so called best practices:

• Semantic HTML
• Separation of content and markup
• Cross browser support
• Search engine friendliness

And everything else that a modern web site should have.

Why a CSS strategy?

The problem is simple – A big web site with multiple developers working on it simultaneously along with their individual coding styles.

There needs to be a set of guidelines for everyone to follow. At a bare minimum you need consistency in coding and (a sense of) ease of maintainence. Anything above that (like good readability) is a bonus.

For me I don’t know what is more readable – hundreds of lines of CSS code or a couple of dozen tables nested inside each other. I’ve seen both and I’ve pulled my hair out trying to debug seemingly trivial issues.

CSS is not like any other programming language where you have standard design patterns or best practices to refer to. Quite often there are a zillion ways to do the same thing. You could chose between using external stylesheets or inline styles; If you use external stylesheets you need to organize them effectively; You could define selectors for ids or classes or for html elements; You could use nested styles based on multiple things; You need hacks to support older browsers and so on…

What will be the components of my CSS strategy?

There are multiple challenges involved in a project like this. The ones that I can think of at the moment are

1. CSS framework – Is there need to use an external CSS framework or should one build everything from scratch.
2. Organisation of CSS code – It is a matter of time that your CSS code will grow and if you’re building a big site with complex styling you will need a strategy to organize your CSS files.
3. Guidelines for coders – There needs to be a set of rules for consistency and for efficiency (code reuse, tackling common problems etc.)
4. Workflow definition – Can a coder modify a file that is used globally and where a simple change might impact the whole site? At what level should new styles be added?
5. CSS hacks – Sooner or later you face a situation where you need to apply browser specific hacks. This is definitely a last resort but you need have a plan to tackle such issues.

I do not know the answers to these questions yet but I have some vague ideas forming in my head based on some resources on the web and my instincts. Let’s see how they develop over the next few days.