Don’t Mix HTML or CSS with JavaScript

On a website, HTML describes the structure, CSS describes the styling and JavaScript controls the behavior. Developers call this the separation of concerns, and it’s something which you’ll need to understand and follow if you want to be an efficient coder.

Why is it so important to be aware of this? Because when writing code for a website, it can sometimes be ‘the easier option’ to break this rule and mix a bit of HTML or CSS into your JavaScript code. However, in the long run, blurring the line between behavior, content and styling is not really making your coding easier – in fact, it will make it a lot harder.

In this article, you’ll see two examples of mixing HTML or CSS with JavaScript, why it’s a bad coding practice, and what you should do instead.

Mixing CSS with JavaScript

Here’s an example of CSS being mixed in with JavaScript:

$('h1').mouseover(function(){
    $(this).css('color','green');
}​);​

This code uses the jQuery CSS method to change the color of the heading text to green on mouse over.

But now one of your CSS declarations is in your JavaScript. Say you decide a month later you want to remove that CSS declaration – you go into your style sheet, and you can’t find the declaration. Where is it?

Oh, that’s right, it’s in your JavaScript.

Your CSS should really be all in the one place. Mixing CSS in with JavaScript fragments it and turns it into a disorganized mess.

So as you can see, mixing CSS in with JavaScript is not ideal. What should you do instead?

The Solution

Change your JavaScript to this:

$('h1').mouseover(function(){
    $(this).addClass('classname');
}​);​

And add a new CSS rule:

.classname {
    color: green;
}

Of course, the class name can be whatever you want. By adding a class name in the JavaScript and leaving the styling to the CSS, you’ve got a clean solution which allows the same result, while also allowing all your CSS to remain together.

On a side note, the jQuery CSS method should only really be used for two purposes. One is when you may want to query the CSS properties but not set them, and the other is when you may need to calculate the CSS value before you can actually set it.

Mixing HTML with JavaScript

Here’s an example of HTML being mixed in with JavaScript:

$('h1').mouseover(function() {
    $(this)​.append('<h2>A hidden subheading.</h2>');
});

This example code adds an <h2> heading after the <h1> heading when it’s hovered over.

But for the same reason as CSS, mixing in HTML with your JavaScript is not ideal. There’s a better way:

The Solution

Instead, what you can do is hide the content with CSS initially, and then show it with JavaScript when required, like this:

$('h1').mouseover(function(){
    $('h2')​.show();
});

This way, the actual content and structure is left to the HTML, while the functionality remains the same – the hidden subheading appears when the main heading is moused over.

Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.