Click here to Skip to main content
11,933,213 members (63,674 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


4 bookmarked

Architecting Cascading Style Sheets (CSS)

, 26 Aug 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Architecting Cascading Style Sheets (CSS)

There is one big problem with CSS, and that is its lack of ‘structure’. When you have a 20-page project, fine – dump everything in one file. When you have hundreds of pages, across half a dozen different design agencies, things start to become very messy.

And I hate mess.

A client of mine is in this situation. Over three years, they have had 6 different designers, each with different visual styles – but, more importantly for me – each with different CSS requirements and implementations.

The impact of this has been bothering me ever since I began, but I’ve always had more ‘architectural’ problems to deal with. However, I decided enough is enough when I realized our total CSS payload was 1Mb, and our biggest CSS file consisted of over 5,000 lines.

Architecting CSS

There are a few things I want from my CSS:

  • I’m mostly a C# developer these days, so I like the object-oriented thing – I get it, it’s tidy, it’s re-usable.
  • The ‘cascading’ part of CSS is wonderful, but it is a double-edged sword. When some designer submits a stylesheet with a tag like “.main h2”, then it will inevitably affect portions of the site they weren’t even involved in.
  • Problems with CSS only manifest themselves when you actually view it – in other words, they are runtime errors. And when you have hundreds of pages in the site, it is often the users that report a styling problem, not our testers.

Close, but not close enough

Unfortunately, I can’t claim to fix any of these problems. I admire the ambition of projects like .less ( but something about these didn’t really feel right to me. I guess it's because there is no mainstream support (mainstream support is very important to me as we have a constant stream of new developers coming through – standards are my friend).

I’ve also read a lot of people’s opinions on CSS – how we need to move away from semantics, how we need to move towards semantics, etc. but again, I need something that has plenty of community support on the internet, and that my new developers will be able to hit the ground running with.

A Brilliant Compromise

So, in the interim, while I search for the perfect solution, I’ve come with with a pretty-damn-good solution. It consists of a single user control. You might call it WonderControl, but I call it simply CssContainer.ascx:


<asp:PlaceHolder runat="server" ID="PHStyle" />

Pretty simple huh? One line.


public partial class CssContainer : BaseUserControl
        public ITemplate Style { get; set; }

        /// <span class="code-SummaryComment"><summary>

Okay, a little flasher, but really very simple. I have tried to comment the code intuitively so you can follow it, but the general idea is:

  1. The user of the control specifies regular CSS in a template (called Style)
  2. We render that content into the PHStyle placeholder, just as you would a normal template
  3. We later get that CSS back out of the template, and render to the page between regular <style/> tags

So, the end usage is something like this:

<wc:Css runat="server">
.column-con <span class="code-none">{
    overflow<span class="code-none">: hidden<span class="code-none">;
<span class="code-none">}
.column-con .column <span class="code-none">{
    background-color<span class="code-none">: #fff<span class="code-none">;
<span class="code-none">}

The intention is that you drop this CSS directly into the page/usercontrol that is using it.

Why This Is Bad…

Yip, I understand what the problems are with this:

  1. It is inline, meaning page requests are bigger
  2. It can’t be cached on the browser
  3. It can only be re-used as far as the page or usercontrol it is sitting on

But the answer to all of these is simple: if the pain of breaking these rules, for this set of styles, is too great, then just put them back in your regular external CSS style sheet.

This control is not intended to replace your external sheets, but rather complement them.

So, Why It’s Good…

There’s only one reason: it’s tidy. Where we have an obscure user control or page whose styles depart significantly from our usual styles, this is a brilliant way of isolating the styles without cluttering the main style sheet.

And because it is rendered in code (as opposed to using direct <style/> tags), I know that I have a lot of control over what I might want to do with this in the future. For example, I could:

  1. fake an external ‘file’ reference using a handler, thereby allowing the resulting request to be cached in the browser
  2. minimize the CSS (actually, I’m already doing this in the example above)
  3. perform replacements such as variable names – just like they do at
  4. I can easily find the styles which apply to my HTML, by just browsing to the top of the UserControl – no more ‘Search Entire Project’ to track down a CSS source (update: Resharper 6 has a fairly good implementation of ‘Go To Definition’ for CSS)
  5. etc. etc. etc.

But until I know how to handle my styles, this solution allows me to contain and manage them far better than regular ‘client-side’ CSS files and embedded <style/> tags allow.

What About Re-usable External Style Sheets?

Previously, where we had isolated CSS, we would create separate CSS files and then pull them into the request ‘on-demand’. Technically, this worked just as well as my solution above – in fact, it was better in that the resulting file would be cached on the client browser and thereby improve overall visit speed.

But this can result in dozens (or much more) of CSS files cluttering up your project, confusing your developers, slowing your project load time, etc. And besides, as I said above, I know that later, when I’m less busy, I’ll be able to create ‘external’ references using ASHX handlers.

But Embedded Styles are Terrible!

In theory, yes – but in practice, definitely not. One of the worst things a developer can do is get caught up in ‘best practice’. As long as you understand the reasoning behind the rules, you’re able to break them when you find the reasoning doesn’t apply to your current project.

Besides, go do a ‘view source’ on any of these home pages – you’ll see a lot of embedded styles:

See? I’m in good company.


This is not the most technically-brilliant piece of work I’ve done, but I have to say it’s one of the most exciting. I love being able to recklessly add styles exactly how I like with little regard for structure – content in the knowledge that future-Ben will be able to easily tidy it up one day.

I strongly urge other developers to consider this type of structure for any medium-large projects they are undertaking.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Ben Liebert
Architect BlackBall Software
New Zealand New Zealand
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 4 Pin
BrianBissell1-Sep-11 11:19
memberBrianBissell1-Sep-11 11:19 
GeneralToo much Pin
Jakub Januszkiewicz31-Aug-11 12:33
memberJakub Januszkiewicz31-Aug-11 12:33 
GeneralRe: Too much Pin
Ben Liebert31-Aug-11 12:44
memberBen Liebert31-Aug-11 12:44 
GeneralRe: Too much Pin
Jakub Januszkiewicz2-Sep-11 12:41
memberJakub Januszkiewicz2-Sep-11 12:41 
QuestionThis is all good when it comes to a single themed site Pin
Daniel Gidman29-Aug-11 4:16
memberDaniel Gidman29-Aug-11 4:16 
AnswerRe: This is all good when it comes to a single themed site Pin
Ben Liebert29-Aug-11 10:15
memberBen Liebert29-Aug-11 10:15 
Hi, thanks for the feedback. Actually I have found it is more sustainable this way. A stripped back the example, but in production we have a enumeration which lets us specify styles on a per-theme basis. We also use Resharper 6 which means we can Ctl-Click any CSS name and go straight to its definition - it doesn't matter if it is in external files or in the class itself - Resharper will find it.

Remember, over-arching styles such as colours, fonts, etc should still be kept in external style sheets because they are used across multiple pages/controls. This tool is just for control/page-specific styles, which are usually layout-related (well, in my experience).

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.151126.1 | Last Updated 26 Aug 2011
Article Copyright 2011 by Ben Liebert
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid