In Adobe Flex, separating interface logic from design decisions helped keep larger applications maintainable. Flex Builder 3 provided a visual CSS editor for creating component styles without leaving the source file behind.

Creating the CSS file

  1. Create a project using Flex SDK 3.
  2. Add a CSS file to the project.
  3. In the visual editor, choose New Style and select the component you want to customize.

The editor offered four scopes:

  • All Components: apply the style to every component;
  • All Components with style name: apply it to components with a given styleName;
  • Specific Component: apply it to a specific component type;
  • Specific Component with style name: combine a component type with a styleName.

Properties could generate reusable child styles. For example, the status bar style from a TitleWindow could also be applied to a Panel.

The screenshots of the visual editor were no longer available during the migration.

Adding CSS to the application

Include the file in the main MXML document:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute">
    <mx:Style source="styles.css" />
</mx:Application>

During compilation, Flex checked which styles the application used and warned about unused declarations. Flex Builder’s autocomplete also helped developers discover the properties available for each component.