Separate Design and Code!

I can’t say this often enough, SEPARATE YOUR DESIGN AND YOUR CODE! If you want easy maintenance, if you want to be able to change your design and not have to recode a LOT of things, SEPARATE THEM!

This evening Mark and I were having a bit of a debate, he was asking how to execute .NET code in the HTML designer, and I personally wanted to say “It’s not possible”, but went ahead and told him to use < % code here %>. Of course, I then proceeded to warn him of the danger that will present in the future and the fact that it is bad practice to do such.

So let me explain to everyone why it is necessary to separate code and design.

1. Reusability
   Let me present fact number one, by separating design and code, you are forced to write code in a more reusable manner. For example, with the separation you are likely to write a placeholder on your page, that you will use the CodeBehind page to write the output (or for PHP, in a class you call).

   Now the idea is to build an object for your data, something that can be reused by numerous applications. Yes, I know what you are thinking, this data will never need to be reused, why can’t I just write the code in the design? You say it can’t be reused now, but just give it a few months and when someone asks how to access your data, you will feel pitiful. ALWAYS write your code as if everyone would want to use it! Anyways, you have your object of data, and then it is up to each application to determine how they wish to display it. Thus, if you do not incorporate it directly into the design, it is entirely reusable in any fashion, form, design, etc. Thus point number 1.

2. Maintenance - Updating
   By placing your code in a separate file from your design, you can achieve easy maintenance and updating of the design without having to rewrite significant pieces of code. How site designs has your company been through? Are they looking into going into Web 2.0? Will they likely rebrand if bought? Will users complain about the complexity of the design and seek an alternate way of access their data? All these are things to consider at design time and at code time.

   How cool would it be if all you had to do was alter the CSS and the HTML to implement the new design, all of this is possible when you separate Code and Design. At work, our sites are made just like that, and I am damn proud about it too. The fact I can just a few lines in the stylesheet and show off an entirely new looking site just rocks! Unfortunately, very few know this and every so often write code that doesn’t quite flow with what I try to achieve.

3. It’s Easy!
   Why not separate design and code? If you are using Visual Studio for .NET, you are an IDIOT not to separate them. Visual Studio makes it easy! Binding objects, datasets, etc to just about every possible control you can think of, and you aren’t doing this. You think it is overkill? Well its’ not. It was designed this way intentionally to ensure the practice of separating design and code get utilized into your coding lifestyle. So if you feel it is overkill, GOOD. You are doing exactly what the developers of Visual Studio wanted you to do.

There are many more reasons, and everyone typically has a personal reason for separating code and design, what are yours? Why do you do it, or not do it?