在组件中切换CSS框架 [英] Switching the CSS frameworks in Components
问题描述
我正在使用Angular开发UI应用程序，我可以选择以下一个或多个CSS框架:
I am developing a UI application using Angular and I can choose one or more of the following CSS frameworks:
- 引导程序4
- 基金会
- 角材料
- ng-bootstrap或ngx-bootstrap.
- 我可以购买的预制模板.
- 许多其他人或新来的人...
- Bootstrap 4
- Foundation
- Angular Material
- ng-bootstrap or ngx-bootstrap.
- A pre built template that I can purchase.
- Many others or new ones...
是否有设计Angular应用程序的最佳实践，这样可以很容易地进一步切换到其他CSS框架?
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 ?
我认为，一个选择是定义一个新的Feature模块，该模块将导入特定CSS框架的所有控件，然后在该模块上编写包装并将其在我的应用程序中使用.
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.
例如，我可以将md-button与custom-button一起包装在模块的组件模板中，并在我的应用程序中使用它.
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.
一个组件的视图远不包括诸如按钮和输入之类的低级组件.布局和响应能力全都影响视图的组成.例如，假设您进行了材料设计，并将md-button包裹在my-custom-button中.随着应用程序的成熟，毫无疑问，您将在容器周围添加填充或边距，以容纳这些控件，使它的外观和材质更具实质性.是时候切换到新的设计模式了，您猜怎么着?即使您可以快速将这些按钮换成新外观，您仍将要编辑所有视图以遵循新外观.也就是说，视图远不只是构成视图的低级组件，因此不值得用您自己的组件来包装每个组件.
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.
假设您在Material中完成了整个应用程序，现在您想切换到New Hotness.首先，您需要仔细检查并重命名所有模板:
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
接下来，创建一个构建过程，该构建过程将基于某些配置在构建时交换templateUrl.使用此策略，您将能够轻松集成 Ionic 或
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.
要点:
- 不要用您自己的变体包装现有的库组件
- 在单独的文件中创建组件模板
- 当有一天要切换到新框架时，请为每个组件创建新模板，并使用描述组成该框架的框架的名称定义较旧的模板
- 获得报酬！ :)
这篇关于在组件中切换CSS框架的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
