Keep ’em Separated

Keep ’em Separated
Not so long ago, professional web designers would gleefully pile HTML, CSS, and
JavaScript code into a single file, name it index.html,2 and call it a web page. You
can still do this today, but be prepared for your peers to call it something rather less
polite.Somewhere along the way, web designers realized that the code they write when
putting together a web page does three fundamental things:
■ It describes the content of the page.
■ It specifies the presentation of that content.
■ It controls the behavior of that content.

They also realized that keeping these three types of code separate, as depicted in
Figure 1.1, made their jobs easier, and helped them to make web pages that work
better under adverse conditions, such as when users have JavaScript disabled in
their browsers.
Now, realizing this is one thing, but actually doing it is another—especially if you’re.
not a computer geek. I am a computer geek, and I’m tempted to do the wrong thing
all the time.
I’ll be happily editing the HTML code that describes a web page’s content, when
suddenly I’ll find myself thinking how nice that text would look if it were in a
slightly different shade of gray, if it were nudged a little to the left, and if it had that.
hee-larious photocopy of my face I made at the last SitePoint office party in the
background. Prone to distraction as I am, I want to make those changes right away.Now which is easier: opening up a separate CSS file to modify the page’s style sheet,
or just typing those style properties into the HTML code I’m already editing?
Like behaving yourself at work functions, keeping the types of code you write separate
from one another takes discipline. But once you understand the benefits, you
too will be able to summon the willpower it takes to stay on the straight and narrow.