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.
Avoid in-line CSS
Use styleName and custom class definitions rather than defining styles on MXML elements.
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.
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.
Comment the styles
Comment the styles to help others who will need to make design changes later.
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
Use 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
Use lowerCamelCase for class selector names
This is a community-wide best practice and should be followed.
Avoid using underscores in class selector names
This is another community-wide best practice and should be followed.
Avoid 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.