Sean is a highly sought after Flex developer and consultant with extensive ActionScript programming experience, including more than five years developing for the Flash platform and over a decade of experience designing and developing desktop and web based applications. Business owner, technical author, blogger and Adobe Flex/AIR enthusiast, Sean is an Adobe Flex Developer Community Champion and the creator of the ActionScript Cheatsheets. Sean has posted 2 posts at DZone. View Full User Profile

Flex best practices – Part 2: Development practices

  • submit to reddit

CSS coding standards for Flex

Styling and skinning information can become difficult to navigate and understand if it is not written with coding standards in mind. Here are some best practices for CSS that you can use during Flex development.

checkmark Avoid in-line CSS

Use styleName and custom class definitions rather than defining styles on MXML elements.

checkmark Minimize and clean up your CSS

Keep your CSS in an external file and pull it into the main application MXML file. Avoid embedding styles in MXML code whenever possible.

checkmark Group similar style definitions

Organize similar styles in your application's CSS file by grouping them together. For example, group all text-related styles together or group styles for views together.

checkmark Comment the styles

Comment the styles to help others who will need to make design changes later.

checkmark Limit CSS declarations to one per line

Limit your CSS to a single style definition per line. This improves the readability of the CSS.

Best practices for type selectors

checkmarkUse class selectors instead of type selectors when possible

Try to define custom classes instead of overriding the default styles for the Flex controls. This requires setting the styleName properties on the controls but allows for greater flexibility later.

Best practices for class selectors

checkmark Use lowerCamelCase for class selector names

This is a community-wide best practice and should be followed.

checkmark Avoid using underscores in class selector names

This is another community-wide best practice and should be followed.

checkmarkAvoid naming class selectors based on appearance

Make an effort to name class selectors based on their function not their visual appearance.
For example, use warningText instead of yellowText, and use errorText instead of redText
If you use yellowText,when the warning text color changes then the name no longer describes the result. The name should not be hardcoded to the appearance.


Published at DZone with permission of its author, Sean Moore.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)