我正在使用 Angular 开发一个 UI 应用程序，我可以选择以下一个或多个 CSS 框架：
- 引导程序 4
- 基础
- 角材料
- ng-bootstrap 或 ngx-bootstrap。
- 我可以购买的预制模板。
- 许多其他的或新的...
是否有设计 Angular 应用程序的最佳实践，以便更容易切换到不同的 CSS 框架？
我认为，一种选择是定义一个新的功能模块，它将导入特定 CSS 框架的所有控件，然后，我在其上编写一个包装器并在我的应用程序中使用它。
例如，我可以将md-button 和custom-button 包装在我模块的组件模板中，并在我的应用程序中使用它。
这种方法是否可行，或者是否有我应该遵循的标准设计实践？
【问题讨论】：
标签： css twitter-bootstrap angular angular-material angular2-template
你可以这样做，但在我看来你是在浪费时间。您过去有多少次关闭设计框架？可能永远不会。
组件的视图比按钮和输入等低级组件包含的要多得多。布局和响应能力都会影响视图的组成。例如，假设您使用材料设计并将md-button 包装在my-custom-button 中。随着应用程序的成熟，您无疑将在容器周围添加填充或边距，以保持这些控件，使其外观和感觉更加材质。切换到新设计模式的日子到了，你猜怎么着？即使您可以快速更换这些按钮以获得新外观，您仍将编辑所有视图以遵循新外观。也就是说，视图不仅仅是构成它们的低级组件，而且不值得用您自己的组件包装每个组件的开销。
更有意义的是为每个组件创建单独的模板。
假设您在 Material 中完成了整个应用程序，现在您想切换到 New Hotness。您首先要检查并重命名所有模板：
login.component.html > login.component.material.html
然后创建专门针对新框架的新模板：
login.component.newhotness.html
接下来，创建一个构建过程，该过程将根据一些配置在构建时交换templateUrl。使用此策略，您将能够轻松集成 Ionic 或 NativeScript 等技术，它们的视图不使用 HTML，而是完全不同的基于 XML 的语法。
要点：
【讨论】：
问题不在于 CSS 类名，而在于 HTML 结构。不久前我开始想知道它，并尝试创建一种中间语言，它可以生成符合 Bulma 的 HTML 或符合 Bootstrap 的 HTML，具体取决于我选择的 CSS 框架。它依赖于 Pug mixin，每个框架都有特定的实现。因此，我可以为表单字段编写此代码：
form
+m-input#name(m-label="Name" type="text")
+m-input#password(m-label="Password" type="password" placeholder="Password")
在 Bootstrap 的情况下，它会生成这个：
<form>
<div class="form-group">
<label for="name">Name</label>
<input id="name" m-label="Name" type="text" class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" m-label="Password" type="password" placeholder="Password" class="form-control">
</div>
</form>
...但对于 Bulma 案例，它会生成：
<form>
<div class="field">
<label for="name" class="label">Name</label>
<div class="control">
<input id="name" m-label="Name" type="text" class="input">
</div>
</div>
<div class="field">
<label for="password" class="label">Password</label>
<div class="control">
<input id="password" m-label="Password" type="password" placeholder="Password" class="input">
</div>
</div>
</form>
This post 涵盖了更深入的讨论，并提供了其他示例。
【讨论】：