Separating code from content and presentation

Most web designers nowadays know that content and presentation should be separated. There are still a few examples of HTML <table> and <br> elements used for layout, instead of CSS, but this is diminishing.

The same can't be said of separating code (i.e. javascript) and presentation. I still see lots of examples of layout being set via javascript. It's even built into most javascript frameworks - for example, jQuery has a set of css methods to allow the likes of $('#div1').css("color: red").

That's just wrong. You can't hope to maintain your website's style if you set CSS via javascript - it's difficult enough organising CSS files without having to wade through javascript as well to figure out why a certain style is set. Re-designing your site will require you to change all your code too!

The best solution is to remove all javascript and simply use CSS, with pseudo-classes like :hover and :active to get more control. However, if you're responding to a more complicated event, then you should use classes. Just do $('#div1').addClass('highlighted') instead. You can maintain the actual style in your CSS file, in this case div.highlighted {color: red}.

Similarly, I always try to remove all HTML from my code. It's very easy to get caught up creating and inserting whole DOM trees via javascript alone. But this is inaccessible to search engines, and creates content management nightmares. Now you have to search all your javascript to find where the image came from, as well as the HTML files!

The best solution to this is to remove all javascript and simply use HTML and CSS. However, if you're responding to a more complicated event, then you should have the additional markup already present in the HTML file, perhaps hidden using CSS display:none. You can simply turn it on in your code, without having to create it.