The more I work with Flex 4, the more I understand why certain choices were made regarding the new component architecture, especially in regard to skinning. I stumbled, at first, as the skinning model is quite different and can appear much more cumbersome at first glance. Like most Flex devs, I was used to just modifying the CSS to style Halo components quickly and easily. The Spark model is more complex- but holds a lot more power as demonstrated below.

Example:
How to turn this button…

Into This button…

The only difference being the addition of the CustomButton skin class:

    
        /**
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
    

    
        
        
        
        
    

    
    
        
            
        
        
			
				
				
			
        
    

    
    
    
    

As you can see, you can pretty much use any sort of visual wizardry you like in here: Solids, Gradients, Bitmaps, Strokes, what-ever!

Super easy to get started too, as you can have Flash Builder duplicate an existing skin to get you started. Just rename and recode. Once within the new skin, you can use the Appearance panel to modify things as you would through Halo (CSS styling) in previous versions of Flex, or get into the nitty-gritty as I’ve done here.

Cool.