Use 2 different frameworks in the same CSS?

If both fremeworks have the files SCSS it is possible to do the unification, but let's go to the pros and cons.

Pros

As you mentioned that in addition to the merge you will do the minification, this can better load the site, and there will be fewer files to be mapped at the time of the merge. load of page.

Another positive side is that there are classes that use the same methods and attributes, you can use the @extend command, generating only one class with multiple mappings, code reuse p>

  

Against

The counter is the one that has the most weight, assuming that:

Framework1

*{
  margin: 0 auto;
}

h1{
   color: red;
}
p{
  color: white;
}

Framework2

h1{
   font-size: 24px;
   color: red;
   margin-left; 30px;
}
p{
   font-size: 18px;
   color: black;
}

So it is not enough just to copy and paste, you have to understand what default attributes and methods will be used in the project, and delete the inappropriate content, since it does not make sense to comment because minification will occur and comments will be removed. > To use @mixin and extend I see a bigger problem in unification, since these frameworks already use in their development the use of these technologies for code reuse, and for you to use in the project, you need to know which classes use the same standard and reapply these techniques and for this you would have to spend a lot of time studying the two css files.

If an update of framework occurs that has a positive impact on your project to incorporate it, you would have to redo the whole process.

And last and most important is the documentation, in case a project shared by a team whether big or small and a team member is removed from the project, or another one incorporated into the project can have a very big impact with deadline and will lose the documentation of the framework, being necessary to make a new documentation, that is infeasible in terms of process, term and costs. Since the documentation of the frameworks is very good and it is easy to find several tutorials on the internet.

  

Conclusion

In no way add separate framework files.

For good code-building and documentation practice, always use fremework in its already mini- mized form or build a framework from scratch for a company.

What can be done and is very common is to create scss files for different parts of the project example a login.scss file for the login part and another cadastro.scss for castro part and a 3rd acesso.scss will make import of all these files, example:

access.scss

import '/acesso/login.scss';
import '/acesso/cadastro.scss';

This way in gulfile.js the only file to be called will be acesso.scss .

    

In fact, if you are going to use Gulp to "compile" a custom CSS, you can use a SCSS file and import the values of the desired framework ...

Example

1) install the desired frameworks

 npm install --save bootstrap flexboxgrid

2) Use the scss file to import the framework styles, importing the desired files:

@import "node_modules/bootstrap/sass/bootstrap.scss
@import "node_modules/flexboxgrip/sass/flexboxgrid.scss"

3) compile using the GULP. This will generate the desired files together.