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?