css - 设计大型 ExtJS 应用程序的样式

Question

我正在使用 Ext JS 4 开发一个大型 RIA 应用程序。在我的 index.html 中我有以下定义:

<link rel="stylesheet" href="ext/resources/css/ext-all.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/GridFilters.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/RangeMenu.css">
<link rel="stylesheet" href="resources/css/default/index.css">
<link rel="stylesheet" href="resources/css/default/profile/user.css">
<link rel="stylesheet" href="resources/css/default/profile/documents.css">

问题
在提供的代码中只有 index.css 存在，但我的应用程序中的每个 View 都有自己的 CSS 样式表，它将使用自己的 Sprite /图像(我添加了 user.css 和 documents.css 以提供的代码为例)。所有这些都将变成大量未缩小的 CSS 文件，这将显着减慢应用程序的加载时间。
此外，某些样式的 Ext JS 'ux' 组件未包含在 ext-all.css(GridFilters.css 和 RangeMenu.css 中提供的代码)。

我可以写一个脚本，将所有这些 CSS 文件压缩到一个文件中，但是......

问题

1. 为 Ext JS 4 应用程序设计样式的正确方法是什么？也许应该创建 SCSS 文件并在那里进行所有样式设置，然后每次使用 compass compile 进行编译以创建 CSS 文件并进行开发？
2. 有什么方法可以包含标准 Ext JS 4 发行版中的“ux”组件的样式吗？像 ext-all.css 这样的 'ux 组件(像 ext-ux-all.css)

我希望很多人都在使用 Ext JS 创建出色的应用程序，并且他们已经为自己考虑或解决了此类问题。如果能分享有关此主题的任何知识，我将不胜感激。

Answer 1

我和你的情况类似。

我所做的是首先包含 ext css 文件:

<link rel="stylesheet" type="text/css" href="resources/css/ext-all-gray.css">

然后我所有的应用程序 css 都是使用 compass 生成的。因此，有大量的 scss 文件被编译成一个 css 文件。您可以使用 compass watch，以便在 scss 文件更改时编译您的 css。

我不得不说，一旦您习惯了 compass 和 sass/scss，就很难证明纯 css 文件的合理性 - compass 和 sass 生成更好的跨浏览器 css，并且 scss 文件比纯 CSS。

至于ux css。我不会太担心，但您有两个选择:

• 只需将您的 ux css 文件导入您的主 scss 文件(参见 this answer)；
• 使用众多 css 统一器/合并器/缩小器中的一种。