CSS in Javascript :-)

script.js

/**
 * Merge deep objects
 * Credit: http://stackoverflow.com/a/20591261/3783469
 * @param target
 * @returns {*}
 */
function BD_Extend(target) {
    for(var i=1; i<arguments.length; ++i) {
        var from = arguments[i];
        if(typeof from !== 'object') continue;
        for(var j in from) {
            if(from.hasOwnProperty(j)) {
                target[j] = typeof from[j]==='object'
                    ? BD_Extend({}, target[j], from[j])
                    : from[j];
            }
        }
    }

    return target;
}


/**
 * allowed to add suffix px
 * @param key
 * @param value
 * @returns {string}
 * @constructor
 */
var BD_Incs = function(key, value)
{
    var i = ['height', 'width', 'left', 'right', 'top', 'bottom'].indexOf(key);
    var a = ['auto!important', 'auto', 'important'].indexOf(value);

    return i >= 0 && a < 0 ? 'px' : '';
};

/**
 * Create css factory, todo: Object.keys(cssObject).reduce(fn, default)
 * @param cssObject
 * @returns {string}
 */
function BD_GenerateCSS(cssObject)
{
    var css = '';
    for (cName in cssObject)
    {
        // create new class or media query
        css += (cName.indexOf('@') >= 0 ? '' : '.') + cName + '{';

        for(cProperty in cssObject[cName])
        {
            // class properties or nested media query
            if("0" == cProperty)
            {
                css += BD_GenerateCSS(cssObject[cName][cProperty]);
            }
            else
            {
                // for classes like: 'font-size' we must using 'font_size' in object and replacing it here
                var property = cProperty.replace('_', '-');

                // create option row
                css += property + ':' + cssObject[cName][cProperty] + BD_Incs(property, cssObject[cName][cProperty]) + ';';
            }
        }

        // end of class or media query
        css += '}';
    }

    return css;
}


/* 

example use:

*/

      // define some your variables
      var args = {
        creative: {
            first: {
                file:               '',
                width:              1700,
                height:             1200
            },
            second: {
                file:               '',
                width:              1700,
                height:             1200
            },
            megaboard: {
                transparent:        true,
                file:               '',
                file_mobile:        '',
                width:              1000,
                height:             120,
                his_class:          'promotion__megaboard',
                html:               '',
                html_mobile:        ''
            },
            background_color:       '',
            background_options:     ''
        },
        tools: {
            height:                 1200,
            pr_word:                'Promotion',
            pr_height:              15,
            drupal_toolbar_height:  80,
            element_id:             'page',
            class_front_page:       'front-page',
            class_gallery:          'gallery',
            class_active:           'branding-active',
            class_toolbar:          'toolbar-horizontal'
        }        
      };



        // set some css tyles
        var cssObject = {
            promotion__megaboard: {
                display:    'none'
            },
            promotion__branding: {
                width:      args.page_width,
                height:     + args.creative.megaboard.height,
                position:   'relative',
                margin:     '0 auto'
            },
            branding__bb3: {
                width:      args.page_width,
                height:     args.creative.megaboard.height,
                //position:   'fixed',
                float:      'left',
                outline:    'none'
            },
            branding__bb4: {
                width:      bb_WidthR,
                height:     args.tools.height,
                position:   'absolute',
                top:        0,
                left:       '-' + bb_WidthR
            },
            branding__bb5: {
                width:      '100%',
                height:     args.tools.height,
                //background: '#fff',
                position:   'absolute',
                top:        0, // '-61px'
                padding:    '3px 0 0;'
            },
            branding__bb6: {
                width:      bb_WidthR,
                height:     args.tools.height,
                //position:   'fixed',
                float:      'left',
                outline:    'none'
            },
            branding__bb7: {
                //width:      bb_tempWidth +'px',
                width:      '360',
                height:     args.tools.height,
                position:   'absolute',
                top:        0,
                //left:       args.page_width
                right:      '-360'
            },
            branding__bb8: {
            },
            branding__bb9: {
                width:      bb_tempWidth,
                height:     args.tools.height,
                //position:   'fixed',
                float:      'left',
                outline:    'none'
            },
            megaboard__mobile: {
                display:    'none'
            },
            '@media(max-width: 990px)': [{

                    branding_wrapper: {
                        display:    'none'
                    },
                    megaboard__mobile: {
                        display:    'block',
                        height:     'auto!important'
                    },
                    promotion__branding: {
                        height:     'auto'
                    },
                    branding__bb3: {
                        height:     'auto'
                    }
            }]
        };


        // you can add CSS row anywhere in your script :)
        cssObject[args.element_class] = {
            height: args.tools.height
        };


        // add custom css by page type
        var is_gallery = false;
        if(is_gallery)
        {
            // custom gallery styles, allow overriding
            cssObject = BD_Extend({}, cssObject, {
              // some your styles
            });
        }


// save it to string
var css = BD_GenerateCSS(cssObject);


// print it !!!
document.write('<style>'+css+'</style>');