Flex External Stylesheet Conventions

I know that there are questions regarding this same topic, but for HTML. What are some good conventions in regards to using external stylesheets in a Flex app.? How would you break up the stylesheets (names of stylesheets and what they include)?

13.10.2009 17:41:18
Another related question: Is there a way to make the css outside the compiled file, so that when one changes the CSS, the Flex app changes without recompilation?
ustun 26.10.2009 11:50:39

Flex is not something I've dealt with, but I did some research. It looks like the code to call a remote stylesheet is this:

<mx:Style source="com/example/assets/stylesheet.css" />

Flex Quick Start: Building a simple user interface: Styling your components says this:

Note: You should try to limit the number of style sheets used in an application, and set the style sheet only at the top-level document in the application (the document that contains the tag). If you set a style sheet in a child document, unexpected results can occur.

The implication of this seems to be that multiple stylesheets are not really possible. It sounds like what you want to do is organize your stylesheets, check out Organizing Your Stylesheets and Architecting CSS for some ideas for approaches. It looks like you have classes and basic tags, but the W3C stylesheet specifications are different from the Flex stylesheet specification.

As a non-Flex developer, Namespaces looks interesting as a way to organize namespaces: How to use the new CSS syntax in Flex 4.

25.10.2009 16:55:36
Thanks for the info regarding the use of the stylesheet at the top level of the application
asawilliams 26.10.2009 15:28:50
Did one of the answers solve the problem? If yes, consider accepting the good answer. If you need further information consider updating the question to help folks get you an answer you can accept.
artlung 27.10.2009 16:03:16
The article "Organizing Your Stylesheets" addresses the question of how to organize the css files, but it does not seem relevant to Flex. Therefore, I cannot accept the answer
asawilliams 6.11.2009 19:17:18
No worries. It almost seems like using the term "CSS" to describe Flex stylesheets is wrong - the syntax is different and there are limitations one does not find in web stylesheets. Perhaps this would be a good candidate for a question over at doctype.com ?
artlung 6.11.2009 19:46:37

Flex compiles the external CSS file when you publish your project.

There is a way to load CSS at runtime using Flex; it can be done by compiling CSS files into SWF files and load them at runtime using StyleManager.loadStyleDeclarations.

See the LiveDocs on Stylesheets at Run Time for more info.

26.10.2009 14:59:40

Some conventions we use in organizing stylesheets:

  • Have one main.css stylesheet that holds all of the data for skinning the base application.
  • Have one fonts.css stylesheet to store all of the fonts in the main app, because these can get quite messy.

The main.css stylesheet is included in the main swf via the <mx:Style source="main.css"/> tag. We load our app with as little as possible, and once everything is loaded, if we need to immediately show some text (sometimes we just have a video playing if it's an advertising site), we fade/tween in the main elements and load the fonts.css via StyleManager.loadStyleDeclarations at runtime.

  • If we have an admin panel, we have an admin.css stylesheet which we load at runtime because the main app doesn't need it.

We don't need to divide up the CSS anymore than that because we usually create a whole set of skins in a Theme, so the stylesheet is just applying those skins to components and is pretty lean (using Flex 4). I tend not do divide stylesheets into anything smaller (like "pages.css", "comments.css", "popups.css", or even "controls.css", etc.) because it would be overkill and too much to manage for little in return. That's common with HTML, but that's because HTML requires CSS for nice presentation; Flex could do without CSS entirely.

When developing, one of us usually develops most of the skin right away (having a default wireframe setup, like those found on ScaleNine as they do the photoshop/flash/after-effects. There's no way to not have to recompile the css swf if you make changes. But if it is loaded at runtime, you only have to recompile the css file and not the main swf, which is useful but not really useful during hardcore skin development.

I tried keeping the main stylesheet separate during development (in a custom Theme), and it made development a LOT harder, because I had to recompile the css separately every time I made a change and sometimes I had to recompile the main app too, and there were strange and hard-to-track-down bugs, etc. Then I was compiling two different apps. So I recommend keeping the main css file part of the main app.

If you wanted runtime css without having to recompile anything, try Ruben's CSS Loader and check out the source. But that would come at a runtime performance cost.

16.02.2010 01:51:18