Use 2 different frameworks in the same CSS?

Question

I started my internship today and the first task I received was to find out if it is possible to use two files in a minified CSS.

About minificar I’ve already learned using node and gulp, I’ll use the framework of Bootstrap and any other, just copy the two CSS to a SCSS file, and do the normal compilation and minification process, to generate the single CSS, or this is not possible?

In addition, the process for JS is the same?

Answer 1

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

Example

1) install the desired frameworks

 npm install --save bootstrap flexboxgrid

2) Use the file scss 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 GULP. Thus, it will generate the desired files united.

Answer 2

If both fremeworks own the files SCSS unification is possible, but let’s go to the pros and cons.

Pros

As you mentioned that besides the junction will make the minification, this can better load the site, and will be fewer files to be mapped at the time of load page.

Another positive side is that there are classes that use the same methods and attributes, can be using the @extend command, generating only a class with multiple mappings, "code reuse"

Against

The con is the one with 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’s not enough to just copy and paste, you need to understand which attributes and default methods will be used in the project, and delete the inappropriate content, since it makes no sense to leave comments because minification will occur and comments will be removed.

To use @mixin and extend I see a bigger problem in unification, because these frameworks already use in their development the use of these technologies for code reuse, and for you to use in the project, need to know which classes use the same standards and reapply these techniques and for that would have to spend a lot of time studying the two css files.

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

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

Completion

In no way join separate frameworks files.

For good practices of code building and documentation conduct always use fremework in its minified form or build a framework from scratch for enterprise.

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

access.scss

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

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