Problem

When using several external style SWFs, all of them are a copy-paste of one template wil different colors and bitmaps. This leads to the following:

• Each SWF can have size from 30Kb up to 300Kb and more but it is obvious that they mostly overlap. It would be better not to load the same stuff each time.
• Because of lack of hieararchy and inheritance one color is specified in multiple places
• New style creation is a dumm copy-pasting and replacing values in a whole (possibly big) CSS file
• You can't allow standalode developers to create styles and skins for your application because CSS selector names change and this breaks backward compatibility - but in general they use the same colors.
• You can not allow user to color application as he(she) wants

Solution

Instead of using direct values for styles like "backgroundColor", "color", "borderThickness" you use identifiers ("color1″) for styles "backgroundColor Id", "color Id", "borderThickness Id". Real values are injected at runtime:

Application
{
    colorId: "color4";
    fontSize: 12;
    backgroundColorId: "color0";
}

Style is defined like this:

private var style1:Object = {
    color0: 0x222222,
    color1: 0x333333,
    color2: 0x666666,
    color3: 0xAAAAAA,
    color4: 0xDDDDDD 
};

View Source

Code that applies new style:

/**
 *  Applies style to the application.
 * 
 *  @param object Keys are Strings like "color1", values are real
style 
 *  values ex. "0xFFCC00". 
 */
private function applyStyle(object:Object):void
{
    var selectors:Array = StyleManager.selectors;
    var bitmapClassCacheIndex:int = 0;
    var n:int = selectors.length;
    for (var i:int = 0; i < n; i++)
    {
        var selector:String = selectors[i];
        var declaration:CSSStyleDeclaration = 
            StyleManager.getStyleDeclaration(selector);
        for each (name in idAttributes)
        {
            var idValue:String = declaration.getStyle(name + "Id")
as String;
            if (!idValue)
                continue;
            if (object[idValue] is BitmapData)
                // code for bitmap, see in View Source
            else if (object.hasOwnProperty(idValue))
                declaration.setStyle(name, object[idValue]);
            else 
                declaration.clearStyle(name);
        }
        StyleManager.setStyleDeclaration(selector, declaration, i
== n - 1);
    }
}