title: Switching the CSS frameworks in Components
body: <p>I am developing a UI application using Angular and I can choose one or more of the following CSS frameworks:</p>
  
  <blockquote>
    <ol>
    <li>Bootstrap 4</li>
    <li>Foundation</li>
    <li>Angular Material</li>
    <li>ng-bootstrap or ngx-bootstrap.</li>
    <li>A pre built template that I can purchase.</li>
    <li>Many others or new ones...</li>
    </ol>
  </blockquote>
  
  <p>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 ?</p>
  
  <p>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. </p>
  
  <p>For example, I can wrap a <code>md-button</code> with my <code>custom-button</code> in a component template of my module and use it in my application. </p>
  
  <p>Will this approach work or is there a standard design practice that I should follow ?</p>