2

Comecei meu estágio hoje e a primeira tarefa que recebi foi procurar saber se é possível usar dois arquivos em um único CSS minificado.

Sobre minificar eu já aprendi usando node e gulp, vou usar o framework do Bootstrap e um outro qualquer, é só copiar os dois CSS para um arquivo SCSS, e fazer o processo normal de compilação e minificação, para gerar o único CSS, ou isso não é possível?

Além disso, o processo para JS é o mesmo?

2 Respostas 2

2

Na verdade, se você vai usar o Gulp para "compilar" um CSS personalizado, você pode usar um arquivo SCSS e importar os valores do framework desejado...

Exemplo

1) instale os frameworks desejados

 npm install --save bootstrap flexboxgrid

2) Use o arquivo scss para importar os estilos do framework, importandos os arquivos desejados:

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

3) compile utilizando o GULP. Assim, vai gerar os arquivos desejado unidos.

1

Se ambos fremeworks possuírem os arquivos SCSS é possível fazer a unificação, mas vamos aos prós e contras.

Prós

Como você mencionou que além da junção fará a minificação, isso pode melhor o carregamento do site, e será menos arquivos para serem mapeados no momento do load de página.

Outro lado positivo é o fato de existirem classes que usem os mesmos métodos e atributos, pode ser usando o comando @extend, gerando apenas uma classe com vários mapeamentos, "reutilização de código"

Contra

O contra é o que tem maior peso, supondo que:

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;
}

Sendo assim não basta apenas copiar e colar, precisa entender quais atributos e métodos default serão usados no projeto, e apagar o conteúdo inapropriado, uma vez que não faz sentido deixar comentado pois ocorrerá minificação e os comentários serão removidos.

Para usar @mixin e extend vejo um problema maior na unificação, pois estes frameworks já utilizam em seu desenvolvimento o uso dessas tecnologias para reutilização de código, e para você usar no projeto, precisa saber quais classes usam os mesmos padroẽs e reaplicar essas técnicas e para isso teria que passar muito tempo estudando os dois arquivos css.

Caso ocorra uma atualização do framework que tenha um impacto positivo ao seu projeto para incorporá-lo teria que refazer todo o processo.

E por último e mais importante fica a cargo da documentação, caso seja um projeto compartilhado por uma equipe seja ela grande ou pequena e um membro da equipe seja removido do projeto, ou outro incorporado o projeto pode ter um impacto muito grande com prazo e perderá a documentação do framework, sendo necessário se fazer uma nova documentação, que fica inviável em termos de processo, prazo e custos. Uma vez que a documentação dos frameworks são muito boas e é fácil encontrar vários tutoriais na internet.

Conclusão

De forma alguma junte arquivos de frameworks distintos.

Por boas praticas de construção de código e conduta de documentação use sempre o fremework em sua forma já minificada ou construa um framework do zero para empresa.

O que pode ser feito e é muito comum é criar arquivos scss para partes diferentes do projeto exemplo um arquivo login.scss para a parte de login e outra cadastro.scss para parte de castro e um 3º acesso.scss que fara o import de todos estes arquivos, exemplo:

acesso.scss

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

dessa forma no gulfile.js o único arquivo a ser chamado será o acesso.scss.

1
  • @Ivana o que o WallaceMaxters respondeu, é muito útil e esqueci de mencionar quando tem uma parte customizada e outra do framework.
    – WMomesso
    Commented 1/11/2017 às 13:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .