The HTML layer is arguably the most important because of its responsibility for getting data to the user, and the interaction between the HTML and JavaScript layers is important to the user's overall experience. JavaScript can interact with another layer, the CSS layer, which is responsible for how the page is displayed in the browser. Just as the HTML and JavaScript layers can be tightly integrated, the CSS and JavaScript layers can be coupled.

In Lesson 15, you learned how to change an element's style by using an element object's style property, like this:

var someEl = document.getElementById("someElement");

someEl.style.color = "red";
someEl.style.backgroundColor = "gray";
someEl.style.border = "1px solid black";

This code retrieves an element with an id of someElement and then changes various CSS properties to change how the element renders in the browser. The code works fine, but it suffers from problems like those of coupled HTML and JavaScript in that it makes maintenance more difficult. Not only do you have to revisit this code whenever you want to change the color, backgroundColor, and border properties, but making additional style changes requires an additional line of code for every property you want to change. Code such as this essentially makes JavaScript share the presentation role that is supposed to be the role of CSS.

Another issue is performance. To use the style object you access a DOM object — a poorly performing operation. As you add more lines of code to change an element's style, you not only make your application slower, but you potentially cause the browser to re-render the page multiple times.

Admittedly, it's impossible to completely separate CSS and JavaScript (unless you don't use JavaScript to change an element's style), but you can minimize the integration of CSS and JavaScript by using the className property to add CSS classes to and remove them from an element's className property, as you did in Lesson 15, like this:

someEl.className = "cssClassName";

By doing so, you make only one call to the DOM instead of multiple, and any modification to the CSS is made where it needs to be made — in the CSS file. If you want to add another CSS class to the element represented by someEl, you can write the following code:

someEl.className = someEl.className + " anotherCssClass";

This code adds a CSS class called anotherCssClass, and when you want to remove it you can do this:

someEl.className = someEl.className.replace(" anotherCssClass", "");

There are, however, exceptions to this rule of separation. There are times when changing an element's CSS class cannot provide the functionality you want. Remember the drag-and-drop script from Lesson 24? You had to move an element by changing the top and left CSS properties while also manipulating the element's z-index. This type of fine control is impossible to achieve with CSS classes. So when you need that level of control, setting individual CSS properties with JavaScript is acceptable.