I’m quite ambivalent when it comes to using CSS in Flex. There are some cases where CSS is perfect, but also many where CSS doesn’t do much more than fragment the application.
CSS is a perfect match for skinning, just include a CSS and your application looks completely different. Perfect because it doesn’t require anything from the application, it completely separated. This is the reason for wanting CSS in the first place: separating the way the application looks from the logic.
However, when it comes to layout, as opposed to colors and behaviours, it doesn’t really work that well in Flex.
In HTML CSS is used to separate content and interface, but the size and location of Flex’ components can’t be changed with CSS. Only properties such as colors, fonts, paddings can be set. This isn’t such a bad thing in itself, MXML separates the layout from the logic anyway, but we end up with a fragmented application: some properties are specified in an external stylesheet, and some are specified inline. You have to choose how to do this separation.
This is what makes me ambivalent towards CSS in Flex. I’m not sure how I want to separate my styling. I know that I want to have colors and fonts in a global style sheet. Even if I don’t restyle the whole application, things that affect components shouldn’t be in MXML.
But when it comes to specific components and their paddings, alignments, icons, etc. I don’t want them too far away. So I think I want them in the MXML. But what about the the situation when you have declared a style which you have applied only to some components, much like you would use
class on a HTML tag (
styleName in Flex)? I’m not sure. Having those styles in MXML would mean code duplication, but having them in CSS would mean less overview.
Then there is the lack of more advanced CSS support, like both class and id selectors, child selectors (the “Cascading” in CSS), and so on. To want to style buttons that are children of panels in one way and buttons that are children of other components in another way isn’t so far fetched, is it?
To wrap it all up, I would like to ask you if you have any suggestions on how to work with CSS in Flex. Do you think that it’s only for skinning, or do you have paddings and such in there as well? Do you have some good rules of thumb that you follow?