steve kwan user experience designer

CSS in Flex is not real CSS at all

(February 1st, 2008 - 8:06PM)

When my latest project was pushed in the direction of Flex, we were assured that development in this new environment would be easy. After all, Flex apparently supports CSS, so it should be easy for anyone with previous Web development experience, right?

Well, I'm always skeptical about claims like that, and sure enough, Flex's CSS support turned out to be disappointing.

Let's just be blunt: Flex doesn't support CSS. It supports some rudimentary stylesheet language that was concocted by the boys at Adobe. It does not support CSS. A layperson might mistake Flex's "CSS" for real CSS, but a seasoned Web designer will be able to tell the difference in a matter of minutes.

• Flex CSS has no support for dimensioning (width, height) or relative positioning (float, clear) of an element.

  This is a huge oversight in Flex's implementation of CSS. Without being able to size and position elements in CSS, you have to hard-code these values into the markup. Since separation of presentation and content is the core principle of CSS, and since Flex's implementation doesn't let you do that effectively, Flex CSS is almost useless.

  I think the reason width and height aren't stylable is because Flex considers them to be "properties" rather than "styles." As far as I can tell, this is some arbitrary distinction made by the Flex guys. In your forays with Flex, you'll probably find other places where you can't style something because it's a "property."

  As far as float and clear go, they don't exist. This is because Flex handles relative positioning with elements called HBox and VBox. Since these are actual tag elements that are embedded right into your markup, there's no easy way to move layout options into your stylesheet.

• Flex CSS doesn't support descendent selectors.

  In CSS, you can change the behaviour of classes or elements based on where they appear in your document hierarchy. For example, with this style...

  div p
{
    font-weight: bold;
}

  ...and this markup...

  <p>First paragraph</p>
<div><p>second paragraph</p></div>

  ...only the second paragraph would be bold.

  Descendent selectors are one of the critical techniques in CSS. In fact, descendent selection is one of the ways that CSS "cascades," so you can't really claim to have 100% CSS (Cascading Style Sheets) unless you support it. And Flex doesn't.

• Flex CSS doesn't support multiple classnames on a single element.

  In HTML, you can make clever reuse of styles by using multiple stylenames on a single element. For example, if you have separate but similar styles for two different sections...

  emailSection
{
    border: 1px solid #000000;
    background-color: #EEEEEE;
    font-size: 11pt;
    color: #000000;
}
loginSection
{
    border: 1px solid #000000;
    background-color: #EEEEEE;
    font-size: 11pt;
    color: #0000FF;
}

  ...you could could create these sections with markup like this...

  <div class="emailSection">...</div>
<div class="loginSection">...</div>

  However, if you wanted to be clever, you could improve readability and maintenance by merging the styles like this...

  section
{
    border: 1px solid #000000;
    background-color: #EEEEEE;
    font-size: 11pt;
}
emailSection
{
    color: #000000;
}
loginSection
{
    color: #0000FF;
}

  ...then you could create these sections like this...

  <div class="section emailSection">...</div>
<div class="section loginSection">...</div>

  This results in a much cleaner, more maintainable stylesheet. This technique is critical in large applications. Unfortunately, it's unsupported by Flex CSS.

• Flex CSS has no ability to specifically position or repeat background images.

  Gradients, one of the design hallmarks of Web 2.0, are not well supported in regular CSS. But at least you can accomodate them by tiling background images.

  Unfortunately, Flex CSS supports neither gradients nor this CSS workaround. I was able to find a third-party extension that enables this feature, but it's a shame it wasn't included directly in Flex CSS. It's a bit of a stretch to call Flex a "Rich Internet Application" development environment if it doesn't support custom gradients.

Don't get me wrong: Flex has a lot of things going for it. However, myself and many other Flex developers I know have encountered extreme frustration in working with Flex. Although I'm using Flex 2, it almost feels like a beta. I'm planning to upgrade to Flex 3, but I suspect that many of my problems will persist.

Any developers reading this should know that Flex isn't necessarily bad. In fact, it has a lot of things going for it. It's proven extremely effective for prototyping, and believe me, I've put it through the wringer. It's also got a great componentization and extension model that you won't get in HTML. However, it's far from perfect. Be forewarned before delving into serious Flex development.