Flex外部样式表约定

Question

我知道有关于同一主题的问题，但对于HTML。在Flex应用程序中使用外部样式表有哪些好的约定？你会如何分解样式表（样式表的名称及其包含的内容）？

Answer 1

Flex在发布项目时编译外部CSS文件。

有一种方法可以在运行时使用Flex加载CSS;可以通过将CSS文件编译为SWF文件并使用StyleManager.loadStyleDeclarations在运行时加载它们来完成。

有关详细信息，请参阅LiveDocs on Stylesheets at Run Time。

Answer 2

我们在组织样式表时使用的一些约定：

• 拥有一个main.css样式表，其中包含用于为基本应用程序设置外观的所有数据。
• 有一个fonts.css样式表来存储主应用中的所有字体，因为这些字体会变得非常混乱。

main.css样式表通过<mx:Style source="main.css"/>标记包含在主swf中。我们尽可能少加载我们的应用程序，一旦加载完所有内容，如果我们需要立即显示一些文本（有时我们只是播放视频，如果它是一个广告网站），我们在主要元素中淡入/补间并加载fonts.css在运行时通过StyleManager.loadStyleDeclarations。

• 如果我们有一个管理面板，我们有一个admin.css样式表，我们在运行时加载，因为主应用程序不需要它。

我们不需要再分割CSS了，因为我们通常在Theme中创建一整套皮肤，因此样式表只是将这些皮肤应用于组件并且非常精简（使用Flex） 4）。我倾向于不把样式表分成任何更小的东西（比如“pages.css”，“comments.css”，“popups.css”，甚至“controls.css”等），因为它太过于过分而无法管理为了回报。这在HTML中很常见，但这是因为HTML需要CSS才能很好地呈现; Flex完全没有CSS。

开发时，我们中的一个人通常会立即开发大部分皮肤（使用默认的线框设置，就像ScaleNine上的那些设置，因为他们会进行photoshop / flash /后效。没有办法不如果进行更改，必须重新编译css swf。但是如果它在运行时加载，你只需要重新编译css文件而不是主swf，这在硬核皮肤开发过程中很有用但不是很有用。

我尝试在开发期间（在自定义主题中）保持主样式表分离，并且它使开发变得更难，因为每次我做出更改时我都必须单独重新编译css，有时我不得不重新编译主应用程序它也有奇怪的，难以追踪的错误等等。然后我正在编译两个不同的应用程序。因此，我建议将主css文件保留为主应用程序的一部分。

如果您想要运行时css而无需重新编译任何内容，请尝试Ruben's CSS Loader并查看the source。但这会产生运行时性能成本。

Answer 3

Flex并不是我所处理过的，但我做了一些研究。看起来调用远程样式表的代码是这样的：

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

Flex Quick Start: Building a simple user interface: Styling your components说：

  

注意：您应该尝试限制   一个样式表的数量   应用程序，并设置样式表   只在顶级文档中   申请（该文件   包含标签）。如果   您在孩子中设置样式表   文件，意外的结果可以   发生。

这意味着多个样式表实际上是不可能的。听起来你想要做的就是整理样式表，查看Organizing Your Stylesheets和Architecting CSS以获取方法的一些想法。看起来你有类和基本标签，但W3C stylesheet specifications与Flex样式表规范不同。

作为非Flex开发人员，Namespaces看起来很有趣，可以组织命名空间：How to use the new CSS syntax in Flex 4。