Performance Issue on css and javascript styling

Question

I make some ui custom controls. Typically my controls have themes to them so it can be changed. I dont use css files for each themes. What I do instead is hava a javascript file that contains the different themes for that particular control. Example of my button control (Note i took the rest of the css off the other colors just so this wont be so long in the post)

(function ($) {

    $.fn.buttonTheme = function () { };
    $.buttonTheme = {

        newButtonTheme: function(){
            $.buttonTheme.rules = {
                "button" : 
                {
                    "nonrounded": "cursor: pointer; cursor: hand;display:inline-block;zoom:1;*display:inline;" +
                                  "vertical-align:baseline;margin:0 2px;outline:none;text-shadow:0 1px 1px rgba(0,0,0,.3);" +
                                  "-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);" +
                                  "-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px rgba(0,0,0,.2);",
                    "rounded": "cursor: pointer; cursor: hand;display:inline-block;zoom:1;*display:inline;vertical-align:baseline;margin:0 2px;" +
                               "outline:none;text-shadow:0 1px 1px rgba(0,0,0,.3);-webkit-border-radius:.4em;-moz-border-radius:.4em;" +
                               "border-radius:.4em;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);" +
                               "box-shadow:0 1px 2px rgba(0,0,0,.2);"
                },
                "light_gray": 
                {
                    "enabled": "" +
                                "",
                    "disabled": "",
                    "hover": "",
                    "text": ""
                },
                "black":
                {
                    "enabled": "",
                    "disabled": "",

                    "hover": "",
                    "text": ""
                },
                "gray": 
                {
                    "enabled": "",
                    "disabled": "",

                    "hover": "",
                    "text": ""
                },
                "white":
                {
                    "enabled": "",
                    "disabled": "",

                    "hover": "",
                    "text": ""
                }

            };
        }
    };

})(jQuery);

So in the control javascript file I build the control by assigning the particular elements the particular style it needs based on the selected theme like ligh_gray. I find this method to be easy to maintain and update to other themes because the underlying samples are there and its not hard coded in the script. So I can just create another theme like aqua for example and just change the colors, etc. Also I can dynamically change the theme easier without having to do a page refresh

What I wanted to know from others is there thoughts on this. Is there a performance issue in this method? Does it seem like its a maintenance headache?

Answer 1

Yes! This looks like a maintenance head ache ( nightmare ).

CSS belongs to CSS files ( you can apply csslint to CSS files, CSS files also have syntax highlighting, plus most developers rightfully dislike maintaining CSS in JavaScript ).

If you must support different styles at run-time, you can create styles in your stylesheet for each theme and then assign the right class when themes get switched.

To your points:

• I find this method to be easy to maintain and update to other themes because the underlying samples are there and its not hard coded in the script. I am not sure what you mean by "not hardcoded", but you are most likely wrong.

• So I can just create another theme like aqua for example and just change the colors, etc. You can do the same with CSS files

• Also I can dynamically change the theme easier without having to do a page refresh. You can do the same by changing the class dynamically

As for performance, you are using extra bandwidth by sending over all style-sheets, to be avoided on mobile.