我正在使用Angular开发一个UI应用程序，我可以选择以下一个或多个CSS框架：
- Bootstrap 4
- 粉底
- Angular Material
- ng-bootstrap或ngx-bootstrap。
- 我可以购买的预制模板。
- 许多其他人或新人......
是否有最佳实践来设计Angular应用程序，以便更容易切换到不同的CSS框架？
我认为，一个选项是定义一个新的Feature模块，它将导入特定CSS Framework的所有控件，然后，我在其上编写一个包装器并在我的应用程序中使用它。
例如，我可以将md-button与我的custom-button包装在我的模块的组件模板中，并在我的应用程序中使用它。
这种方法是否有效或者我应遵循标准设计实践吗？
答案 0 :(得分：1)
你可以这样做，但在我看来你浪费了你的时间。过去有多少次你改变了设计框架？可能永远不会。
组件的视图比低级组件（如按钮和输入）要多得多。所有的布局和响应都会影响视图的构成。例如，假设您使用了材料设计并将md-button包裹在my-custom-button中。随着应用程序的成熟，您无疑将在容器周围添加填充或边距，保持这些控件使其外观和感觉更具实质性。这一天是在块上切换到新的设计模式，猜猜是什么？即使您可以快速更换这些按钮以获得新外观，您仍然会编辑所有视图以遵循新外观。也就是说，视图不仅仅是构成它们的低级组件，而且不值得用自己的组件包装每个组件的开销。
更有意义的是为每个组件创建单独的模板。
让我们说你在Material中完成了整个应用程序，现在你想切换到New Hotness。您首先会完成并重命名所有模板：
login.component.html＆gt; login.component.material.html
然后创建专门针对新框架的新模板：
login.component.newhotness.html
接下来，创建一个构建过程，该过程将根据某些配置在构建时交换templateUrl。使用此策略，您将能够轻松集成Ionic或NativeScript等技术，这些技术不会将HTML用于其视图，而是基于XML的完全不同的语法。
关键要点：
答案 1 :(得分：0)
问题不是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>
…但是对于布尔玛案，它将生成以下内容：
<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涵盖了更深入的讨论，还提供了其他示例的指针。