Switching the CSS frameworks in Components - css

Question

I am developing a UI application using Angular and I can choose one or more of the following CSS frameworks:
Bootstrap 4
Foundation
Angular Material
ng-bootstrap or ngx-bootstrap.
A pre built template that I can purchase.
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 ?

Answer 1

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! :)

Answer 2

The issue is not so much the CSS class names, but the HTML structure. I started wondering about it a while ago, and did an attempt to create an intermediate language that would produce either Bulma compliant HTML or Bootstrap compliant HTML, depending on the CSS framework I would pick. It relied on Pug mixins that had specific implementations per framework. As a consequence, I could write this for a form field:
form
+m-input#name(m-label="Name" type="text")
+m-input#password(m-label="Password" type="password" placeholder="Password")
And in the Bootstrap case, it would generate this:
<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>
… but for the Bulma case, it would generate this:
<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 covers a more in depth discussion and also has pointers to other examples.