flex3_vs_flex4.mkd

Flex3 vs. Flex4, Advanced CSS

Available selectors in Flex3

1. Type selectors. They are applied to every instance of the class and any subclasses.

   Button {
       color: #3C3C3C;
   }

2. Class selectors. They are applied to every IStyleClient that uses the selector in its styleName property. Even though you can use a type selector with a class selector, they are ignored in Flex3.

   .h1 {
       font-size: 24px;
   }
   
   /* The style is applied to every IStyleClient that uses the "error" styleName, not only Label instances. */
   Label.error {
       color: red;
   }

3. global selector. This is a special type selector that is applied to every IStyleClient in the application.

   global {
       color: black;
       font-size: 12px;
   }

Advanced CSS in Flex4

Flex4 introduces some extensions to the existing CSS selectors. To solve the problem of type selectors with both mx and spark components that have the same name, Spark also introduced namespaces in CSS.

1. Namespaces. When the mxmlc compiler processes the style definitions it uses the namespace to generate type selectors with the fully qualified class name.

   @namespace s "library://ns.adobe.com/flex/spark";
   @namespace mx "library://ns.adobe.com/flex/mx";
   
   /* This will become the type selector "spark.components.Button" */
   s|Button {
       font-weight: bold;
   }
   
   /* This will become the type selector "mx.controls.Button" */
   mx|Button {
       font-weight: bold;
   }

2. Class selectors. In Flex4, class selectors can be used to qualify a type selector.

   s|Button.custom {
       skin-class: ClassReference("com.example.custom.skin.ButtonSkin;
   }

   In Flex4 you can also specify more than one class selector in the styleName property of a component. All of the style declarations specified will be applied to the component following selector specificity.

   <s:Button label="Submit" styleName="big custom"/>

   Finally, you can use a class selector to qualify another class selector. The resulting style declaration will be applied to the component only when all of the class selectors are used in the styleName property.

   /* This declaration will only be applied to components specifying *both* 'red' and 'big' in their 'styleName' property */
   .red.big {
       color: red;
       font-size: 18;
   }
   ```

3. ID selectors. These declarations will only be applied to the components that have an 'id' property that is the same as the selector.

   #submitButton {
       right: 0;
       bottom: 0;
   }

4. Descendant selectors. These selectors will match components depending on their relationship in the display list.

   s|Button s|Label {
       text-decoration: bold;
   }

5. Pseudo selectors, used to apply styles to a component when they are in a specified state.

   s|Button {
       color: #C9C9C9;
   }
   
   s|Button:upAndSelected {
       color: white;
   }
   
   s|Button:down {
       color: #3C3C3C;
   }

Style precedence order and selector specificity

TODO: needs some clarification.

Style declarations take precedence over other declarations with the same specificity in the following order:

1. Calls to setStyle(styleProp, value) in the component
2. Inline styles
3. Class selectors (used in the styleName property)
4. Type selectors (most immediate ancestor takes precedence)
5. Ancestor class' type selectors
6. Display object hierarchy (for inheriting styles only)
7. Styles declared in defaults.css
8. global selector

The specificity of a selector is calculated by adding the scores of the different conditions in a selector, following these rules:

• global selectors add nothing.
• non-global selectors start with 1.
• ID selectors add 100.
• each class selector adds 10.
• pseudo-selectors add 10.

A selector with higher score overrides the other selectors. If more than one selector has the same specificity score, the last one declared wins.

Aditionally, where the CSS declaration was made has a precedence order:

1. Styles declared inside a <fx:Style/> tag.
2. Styles declared in a file included with <fx:Style source="foo.css"/>
3. Styles declared in a file included with the compiler directive -compiler.defaults-css-files.