The styling that Flex 3 comes with is sufficient for most tasks we need it for, but sometimes its limitations can be downright frustrating. However, it's not always possible to upgrade to Flex 4 just to resolve styling issues, so we sometimes need to get creative with the tools we have.
One situation I ran into recently is that we have a component that has always been a fixed size, but now we need to display it at multiple sizes. Our component, of course, has a default CSS definition that works for the size that we needed before, but now that it can be multiple sizes, we need to override the font size and layout based on the parent component.
The first thing I tried was to create a "local" style in the parent component. This did not work as advertised–only properties that had not been defined in the main CSS definition could be updated with new properties in the local definition. In addition, the Compiler gives the warning "CSS Type Selectors are not supported in components." So much for that.
The next thing I tried was setting my custom style properties to be inheritable. According to the style metadata documentation, the inherit property "Specifies whether the property is inheriting. Valid values are yes and no. This property refers to CSS inheritance, not object-oriented inheritance. All subclasses automatically use object-oriented inheritance to inherit the style property definitions of their superclasses...Some style properties are inherited using CSS inheritance. If you set an inheritable style property on a parent container, its children inherit that style property."
What I found, however, is that this only works in a situation where there is no class selector for the Child class. This is because class selectors are higher in the priority for applying CSS styles than inherited styles.
In my opinion, this renders inheritable custom properties virtually useless. Why would you bother setting a custom style property on your component and not give it a default in your main style sheet? So what's left? I was lucky enough to come across "Discover the power of Flex and CSS," which mentioned, almost in passing, that you can use a compound style selector like MyComponentClass.someStyle, which allows you to specify several different styles for the same Class. The main issue I have with this is that the styleName still has to be set manually on the child Class, which can be difficult in cases where the child is deeply nested.
However, this opens up the possibility of creating an inheritable property with the sole purpose of setting that styleName and using inheritance to get that information to the immediate parent of the child component you're targeting. Then the parent can set the styleName on the child. In this case, you would not have a default specified in the main CSS, so it should allow you to use it as deeply nested as you need to, so long as the same parent Class is parenting the Child.
Have you encountered this situation before? If so, how did you handle it?