CODEWITHSUNDEEP
javascripthtmlcssperformance
jnthnjns
jnthnjns

Reputation: 8925

Javascript Styling vs CSS stylesheets

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.

Upvotes: 0

Views: 958

Answers (2)

jfriend00
jfriend00

Reputation: 707326

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.

Upvotes: 6

Halcyon
Halcyon

Reputation: 57719

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.

Upvotes: 3

Related Questions