在组件中切换 CSS 框架 [英] Switching the CSS frameworks in Components

问题描述

我正在使用 Angular 开发 UI 应用程序，我可以选择以下一种或多种 CSS 框架:

<块引用>

1. 引导程序 4
2. 基础
3. 角材料
4. ng-bootstrap 或 ngx-bootstrap.
5. 我可以购买的预构建模板.
6. 许多其他人或新人...

是否有设计 Angular 应用程序的最佳实践，以便更轻松地切换到不同的 CSS 框架?

我认为，一个选择是定义一个新的 Feature 模块，它将导入特定 CSS 框架的所有控件，然后，我在其上编写一个包装器并在我的应用程序中使用它.

例如，我可以将 md-button 与我的 custom-button 包装在我的模块的组件模板中，并在我的应用程序中使用它.

这种方法是否有效，或者是否有我应该遵循的标准设计实践?

解决方案

你可以这样做，但在我看来你是在浪费时间.过去您切换了多少次设计框架?可能永远不会.

组件的视图比低级组件(如按钮和输入)包含的内容要多得多.布局和响应能力都影响到视图的组成.例如，假设您使用 Material Design 并将 md-button 包装在 my-custom-button 中.随着应用程序的成熟，您无疑会在容器周围添加填充或边距，以保持这些控件，使其外观和感觉更加材料.切换到块上的新设计模式的那一天，你猜怎么着?即使您可以快速更换这些按钮以获得新外观，您仍将编辑所有视图以遵循新外观.也就是说，视图不仅仅是构成它们的低级组件，而且用自己的组件包装每个组件是不值得的.

更有意义的是为每个组件创建单独的模板.

假设您在 Material 中完成了整个应用程序，现在您想切换到 New Hotness.您首先要检查并重命名所有模板:

login.component.html > login.component.material.html

然后创建专门针对新框架的新模板:

login.component.newhotness.html

接下来，创建一个构建过程，在构建时根据一些配置交换 templateUrl.使用此策略，您将能够轻松集成诸如 Ionic 或 NativeScript 其视图不使用 HTML，而是完全不同的基于 XML 的语法.

关键要点:

• 不要用自己的变体包装现有的库组件
• 在单独的文件中创建组件模板
• 当切换到新框架时，为每个组件创建新模板，并使用描述组成它的框架的名称定义旧模板
• 获得报酬！:)

I am developing a UI application using Angular and I can choose one or more of the following CSS frameworks:

1. Bootstrap 4
2. Foundation
3. Angular Material
4. ng-bootstrap or ngx-bootstrap.
5. A pre built template that I can purchase.
6. Many others or new ones...

Is there a best practice to design the Angular application, so that it will be easy to switch to a different CSS framework further down the line ?

One option, I think, is to define a new Feature module, which will import all the controls of a particular CSS Framework, and then, I write a wrapper on that and use it in my application.

For example, I can wrap a md-button with my custom-button in a component template of my module and use it in my application.

Will this approach work or is there a standard design practice that I should follow ?

解决方案

You could do that, but in my opinion you're wasting your time. How many times in the past have you switched out the design framework? Probably never.

The view of a component is comprised much more than the low level components, like buttons and inputs. There's layout and responsiveness that all play into the composition of the view. For example, lets say you went with material design and wrapped the md-button in my-custom-button. As the application matures you undoubtedly will being adding padding or margin around containers the hold these controls that makes it look and feel more Material. The day comes to switch to the new design pattern on the block, and guess what? Even though you can quickly swap out those buttons for a new look, you're still going to be editing all your views to follow the new look. That said, views are much more than the low level components that make up them, and it's not worth the overhead of wrapping each component with your own.

What makes more sense is to create separate templates for each component.

Lets say you did you entire application in Material, and now you want to switch to New Hotness. You first would go through and rename all your templates:

login.component.html > login.component.material.html

And then create new templates specifically targeting the new framework:

login.component.newhotness.html

Next, create a build process that would swap the templateUrl at build time based on some configuration. Using this strategy, you will be able to easily integrate technologies like Ionic or NativeScript which do not use HTML for their views, but a completely different XML based syntax.

Key takeaways:

• Don't wrap existing library components with your own variation
• Create component templates in a separate file
• When the day comes to switch to a new framework, create new templates for each component and define the older templates with a name that describes the framework that comprises it
• Get paid! :)

这篇关于在组件中切换 CSS 框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！