Javascript Styling vs CSS stylesheets

Question

When it comes to load on a browser, browser support, anything I may not have thought of, etc. Does having a vast majority or all of your styling declared in Javascript hurt the end user vs including a CSS stylesheet?

I threw together a quick example, shown below and as well as this Fiddle

HTML:

<body onload="init();">
    <div class="container">
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
        <div class="row">
            <div class="col"></div>
            <div class="col"></div>
        </div>
    </div>
</body>

Javascript:

var init = function() {
    // Using window object to set global variables
    // since global variables are attached to the window object anyway
    window.container = document.getElementsByClassName("container");
    window.row = document.getElementsByClassName("row");
    // Initialize variables
    window.rows = [];
    window.cols = [];

    // Get chidren counts but also setup for future use
    window.setCounts();
    // Now lets calculate the widths
    window.setWidths();
};

window.setCounts = function() {
    for (var c = 0; c < window.row.length; c++) {
        window.rows.push(window.row[c]);
        window.rows[c].row_count = 0;
        for (var i = 0; i < window.row[c].children.length; i++) {
            if (window.row[c].children[i].className === 'col') {
                window.rows[c].row_count += 1;
            }
        }
    }
};

// When the screen is resized we need to refactor the widths
window.onresize = function(event) {
    window.setWidths();
};

window.setWidths = function() {
    window.wWidth = window.innerWidth;
    window.wHeight = window.innerHeight;
    var container_width = window.wWidth * 0.95;
    var row_width = container_width * 0.98;

    for (var i = 0; i < window.container.length; i++) {
        window.container[i].style.width = (window.wWidth * 0.97) + "px";
        window.container[i].style.height = ((window.wHeight * 0.90)) + "px";
    }

    for (var c = 0; c < window.rows.length; c++) {
        window.rows[c].style.width = row_width + "px";
        for (var i = 0; i < window.rows[c].children.length; i++) {
            if (window.rows[c].children[i].className === 'col') {
                window.rows[c].children[i].style.width = (row_width / window.rows[c].row_count) + "px";
                window.rows[c].children[i].innerText = (row_width / window.rows[c].row_count) + "px";
            }
        }
    }
};

And Finally CSS (Temporary, contemplating applying all styles within Javascript):

div {
    overflow: hidden;
}
.container {
    margin: auto;
    margin-top: 5px;
    border: 1px solid red;
}
.row {
    margin: auto;
    margin-top: 5px;
    border: 1px solid black;
    clear: both;
}
.col {
    float: left;
    text-align: center;
}

Please note:
I would like to avoid implementing external libraries like JQuery, I know that the code I have above would be easier done with JQuery. So far I have limited my external libraries to AngularJS since it is the backbone of the application, this allows for less upgrading and possible breaks in my webapp. It is a matter of preference and longevity (in my opinion), please avoid trying to persuade me otherwise.

Do you have any resources that can back this? Is it a matter of preference or easier for you, is that why? — jnthnjns
– jnthnjns, Commented Aug 28, 2013 at 16:39
Doing all that work in a "resize" handler is going to result in a very sluggish application. — Pointy
– Pointy, Commented Aug 28, 2013 at 16:39
My point on browser support is in no way associated with my question on performance. Is there anything I haven't thought of that would cause an issue when styling via Javascript in, let's say IE. — jnthnjns
– jnthnjns, Commented Aug 28, 2013 at 16:40

jfriend00 · Accepted Answer · 2013-08-28 17:49:11Z

CSS styles sheets can be loaded BEFORE the DOM is fully loaded which means that they can apply instantly before DOM objects are ever displayed.

CSS styling applied directly to an object via javascript is often applied AFTER the DOM object is initially displayed and can never be applied before the DOM object is parsed. For example, if you want an object hidden on your page, specifying that in a CSS rule loaded from the <head> section will guarantee that the object is never visible. Assigning CSS via javascript to hide the object may cause the object to initially appear and then the javascript will run that hides it.

Further, there's a general concept that a separation between presentation and behavior is often desirable (presentation controlled by CSS and behavior controlled by javascript). While I would maintain that the two are rarely completely separable, there are often different people on a project who primarily work on the "look" and "presentation" of the site vs. work on the "interactivity" or "behavior" of a site and keeping the primary aspects that control those different aspects in separate places can be very useful for maintaining a site. For example, a company may decide to change their color scheme and it might be significantly simpler to find and modify some CSS rather than searching through all possible javascript to find all color references.

And, lastly if there are situations where you need to specify which objects receive a particular styling by using javascript, then you can still put the styling information in CSS rules and use javascript to add classes to objects dynamically. That way, the presentation is still specified in "easier to maintain" CSS rules.

All that said, CSS can't do everything. In particular, it can't do calculations and sometimes a complex layout may be simpler or more reliable to use some javascript to aide in accomplishing your goal. The idea here is to pick the simplest and most maintainable way of getting to your goal with the most separation between presentation and behavior possible.

Halcyon · Accepted Answer · 2013-08-28 16:41:33Z

3

CSS is a lot more maintainable than JavaScript and you can do things with CSS that are very hard to mimic with JavaScript.

Mechanics like add/remove_class enable you to make full use of CSSs dynamics.

Your sample code looks like it's doing some dimensional calculation. CSS can't always deal with this so maybe for this limited usecase JavaScript is better.

answered Aug 28, 2013 at 16:41

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

1 Comment

jnthnjns Over a year ago

That's where I am leaning. This question came about when I decided that I wanted to avoid an excessive amount of class/id declarations, for example span1 through span12 and make it as automated as possible. That's why my example focused on this aspect. Thanks for your input. +1

Collectives™ on Stack Overflow

Javascript Styling vs CSS stylesheets

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related