为大型 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，但我的应用程序中的每个视图都有自己的CSS样式表，它将使用自己的精灵/图像（我在提供的代码中添加了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

创建主题是保持代码良好的唯一方法，也是部署优化 css 的好方法。

使用 secnha 的 mixin（现在部分记录在文档中），您可以为按钮、面板等创建多种外观。您可能很难弄清楚它是如何工作的，但这是做好事情的唯一方法。

您会在他们的文档（指南和视频）中找到很好的资源。他们的scss来源也是一个很好的来源。

Answer 2

我的情况和你类似。

我要做的是首先包含 ext css 文件：

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

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

我不得不说，一旦你习惯了 compass 和 sass/scss，就很难证明普通的 css 文件是正确的 - compass 和 sass 生成更好的跨浏览器 css，并且与 scss 文件相比，scss 文件更容易维护和定制纯 CSS。

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

• 只需在主 scss 文件中导入 ux css 文件（参见 this answer）；
• 使用众多 CSS 统一器/合并器/压缩器之一。