Flex’ CSS implementation isn’t very advanced and it gives me all kinds of trouble when I try to re-style my applications. For the most part Flex does a really good job of allowing customization, but it’s only good for the first 80%.
I’ve long felt that styling in Flex isn’t as powerful as it should be because too many styles are inherited and you can’t turn the inheritance off. For example: if you have a panel with black background, and set it’s
color style to white that means that any text input fields in that panel are also going to have white text, even though their background color is white. To solve this you can reset the
color style of the
TextInput to black again at the end of your CSS definitions, but that’s a hack at best. What you would have wanted to do is to say that the
color style of this component here should not be inherited, but as far as I know you can only say that styles should be inherited.
Part of the problem is that the CSS of Flex isn’t CSS at all — the selectors (rules like
.mySpecialStyle) only allow for the simplest case. Do something like
MyBlackPanel TextInput (i.e. child-of) you have to go through all kinds of hoops to do what you want. Especially since components use each other all over, and thus quite easily can get re-styled unintentionally (for example
ComboBoxes get re-styled when you change
Button‘s styles as we have seen above and the drop-down of a
ComboBox gets re-styles when you change the styles for
List). At the very least you should be able to specify styles that depend on what a component’s parent is.
Don’t get me wrong on this one, I’m not saying that all of it is bad, it just that it works for the easy 80% of what you want to do. It’s actually amazing what you can do with Flex styling and skinning. But some things have been overlooked or oversimplified.