If you ever had some strange problems with styles in Flex, you might want to know how styles are internally handled and implemented.
Ok this post will not cover too much of all the stuff going on there, but a bit of the basics how styles are finding their way from the css file to your component.

Lets assume that we have a css file with type selectors and class selectors, a module based application and some custom components which are designed the way that you can use them out of the box and that they can be individually skinned and styled by other developers reusing them. That´s what custom components are for, right?

So the first question is:
How are the styles compiled into your swf file?
Assume that they are defined in an external css file. You know you can compile css files to swf files and load them at runtime or simply compile them into your application at compile time with a simple assignment like this:

<mx:Style source="assets/styles.css"/>

Here is the content of our simple css:

Button
{
        color: #990000;
}
.myCustomStyle1
{
        color: #009900;
}
 /*
     some additional styles here...
     like Button.myCustomStyle2
*/

That´s what we will use for our example here.

In this case the MXML compiler creates a bunch of classes and inserts the css definitions right into a method called from the constructor in the generated Applications class.

public function StyleExample() {
        mx_internal::_StyleExample_StylesInit();
}
mx_internal function _StyleExample_StylesInit():void {
        var style:CSSStyleDeclaration;
        // Button
        style = StyleManager.getStyleDeclaration("Button");
        if (!style) {
                style = new CSSStyleDeclaration();
                StyleManager.setStyleDeclaration("Button", style, false);
        }
        if (style.factory == null) {
                style.factory = function():void {
                        this.color = 0x990000;
                };
        }
        // myCustomStyle1
        style = StyleManager.getStyleDeclaration(".myCustomStyle1");
        if (!style)
        {
                style = new CSSStyleDeclaration();
                StyleManager.setStyleDeclaration(".myCustomStyle1",
                                           style, false);
        }
        if (style.factory == null)
        {
                style.factory = function():void
                {
                        this.color = 0x009900;
                };
        }
        // similar code follows here....
}

I only pasted the relevant code, so this is not complete but should give the basic idea.
So what happens here?
(Read more…)

At styling and changing my blog theme, i really fall in love with Web Developers (Firefox addon) CSS tools.
Just rollover or select an element and see the css used. Edit it live and see immediately the changes.
How nice would it be to have something inside Flex Builder?
For re-styling or adopting Flex projects this would be a great helper-tool, specially if you edit custom components from other developers.

If you feel this would be a nice feature, vote for it on the Adobe Bugbase.

You probably have seen already the Flex Style Explorer. It gives a good overview of the different styles of the standard Flex components.

BTW: Did you know that parts of Flex Builder are open source (the derived stuff from Eclipse)? You can download it at Adobe.