/customers/iconara.net/iconara.net/httpd.www/blog/wp-content/plugins/wp-super-cache/wp-cache-phase1.php Iconara » On CSS in Flex

On CSS in Flex

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?

5 Responses to “On CSS in Flex”

  1. JabbyPanda Says:

    What I like about external CSS files:

    a) CSS file is a separate text file, not embbeded neither in MXML nor AS file;

    b) can be generated by designer using Flex 2 Style Explorer;

    c) common way for a designer coming from HTML world to apply custom design to the application;

    I must admit, in Flex 2 SDK framework there is certain overlap between properties and styles. Certain things in layouting can be done either in CSS styles or by setting ActionScript properties.

    We tend to first try CSS style, and if this does not work for us, we go with ActionScript object’s property

    Say, Flash Player 9 does not support CSS style: text-decoration: line-through http://dwarfurl.com/06a1a

    WTF, like you like to say : )

  2. Theo Says:

    Thanks! It’s a good point that a non-developer (be it a designer or machine) can work with the CSS as a standalone file.

  3. Jakub Pawlowicz Says:

    Thanks for your post Theo.

    Unfortunately Flex CSS implementation is a very basic one effectively missing the Cascading part. It is hard to understand as we (I mean web developers) are used to it and miss a more robust implementation much.

    And answering to your question I use CSS for content/styling separation – effectively for everything which is not content.

    I wish for more advanced CSS support to ease development and prevent writing custom programmatic skins. I hope we’ll see it one day.

  4. Theo Says:

    @Jakub

    “effectively for everything which is not content”

    But what does this mean in terms of a Flex application? What is “content”?

    To me, content is something I keep in a database and load when it is needed — it is completely separated from the styling as it is. (This differs from the HTML situation when you deliver content along with the tags that describe it.) In the case of a Flex application I don’t think content is something that we need to worry about keeping separate, because application logic, layout, styling (however it is done) is separated from the content by necessity.

    Perhaps you include application logic and layout in the term “content”, that’s more what I’m getting at (or got at, I wrote the post quite a while ago) — so how do you handle that? Do you use CSS for layout (I assume not since it’s not very straightforward to do in Flex)? If you don’t how do you decide what is styling and what is layout?

    If a panel is supposed to be 200px wide, is that style or layout? If you want 5px padding on a container, is that style? Is it always style? Could it be that in some situations padding is style and in other situations it is not? (I would say yes, but defining in which situations is harder)

  5. Jakub Pawlowicz Says:

    Hi Theo,

    Sorry for misunderstanding. In case of Flex by content I meant layout + data logic – since I do Ajax development most of the time it was the first word that came to my mind.

    I think that Adobe misused the name CSS while developing Flex as it is not the same as W3C CSS. Maybe the syntax is the same, but as Flex delivers clear layout / data separation model then layout can be mixed with external stylesheets or developed as a MXML file only (effectively reducing the modularity).

    As you guessed I don’t use Flex CSS for layout, but for styling only.

    I think of layout every time I need to “lay out” or position a panel (properties like position, width, height, and margins). Paddings are styling since these should not affect layout. Everything else like skinning, font and text styling, borders, etc I consider styling too. What about you?

Leave a Reply