If you are interested in creating custom components in Flex and have begun experimenting with styling them... you've probably run into a few circumstances where the interplay between styles and properties (that express a single visual style) have had you reaching for Tums©.

Have you ever been coding away and found a property without its style counterpart? ...or vice versa? Flex is an incredible tool with marvelous potential for creating rich applications... but with great power comes great responsibility. If you miss critical details in your components visual implementation (bits) you unintentionally transform 'drool factor' into 'yawn.'

The key is to implement a property / style flow... that ensures a consistent result without regard to the developers use of your components properties or styles.

Here, I've created a simple component called FooSquare that extends UIComponent. The properties/styles that you want to take a look at are exposed in this example: background color and alpha.

I believe strongly in the principle of least astonishment. Creating harmonious properties/styles will mean a little more work for the component developer - but in the end - this work will translate directly into satisfied consumers.

[ example: property / style harmony in flex ]
[ source: property / style harmony in flex ]