The inflexibility of Flex styling

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 Button or .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.

7 Responses to “The inflexibility of Flex styling”

  1. ian Says:

    I’ve been banging my head against the wall on the togglebuttonbar in my app. The way the colors are handled magically for disabled and selected states bothers me.

    I’d like to see control rather then simplicity on this stuff. Since the button has a 2 color gradient and a highlight with transparency control, give me those same options in every state, not just the default state and magically choose from those for the other states.

  2. ethan Says:

    have you looked at degrafa?

  3. Matt Radel Says:

    Ugh, I totally know what you mean. I tried to skin a Flex app recently and I thought my head was going to explode.

    I’m stoked for Thermo though – I’m really hoping it’s the answer.

  4. Benoit Jadinon Says:

    hi, does anyone know a workaroud to avoid comboboxes to inherit from button styles ? thx

  5. Chad Says:

    Override it?

  6. Wanted: Flex Designers | actionscripter.co.uk Says:

    [...] to change the world until we can get the Designers on board. So perhaps you might want to make it a little easier for them to work with [...]

  7. Andrew Says:

    I feel your pain.

    I’m trying to change the style of ToggleButtonBar at runtime and I finally got everything to work – except that for some reason using CSSSTYLEDECLARATION on my ToggleButtonBar resets the style of all my TextArea’s too.

    There must be a way to turn off the inherit attribute or stop the propagation somehow. This is destroying my life… !

    I’ve been thinking of all these hacks to fix my problem, and just like you said, even if I get it work, it’s just an ugly hack.

    Love Flex but hate the intricate workarounds that I need for seemingly simple tasks.

Leave a Reply