Last week I discovered a  rather annoying bug with Flex’s implementation of CSS.

When you create a class selector, either the compiler or the VM seems to completely ignore it. Not really really a show stopper, but when you handling multiple components with stylesheets it can be a bit frustrating when they aren’t behaving properly.

These for example:

Component1.header {
  color: #ff00ff;
}
Component2.header {
  color: #333333;
}

Flex completely ignores ‘Component’ part and just uses ‘header’, so will overwrite and use last one defined for all components using styleName=”header”

Even across separate MXML files and global CSS files the last one specified will overwrite previous ones.

One way to avoid any conflicts is ditching class selectors and stick with using unique names.

Component1-header  {
  color: #ff00ff;
}
Component2-header {
  color: #333333;
}