Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

CSS: Com organizar os arquivos

por Fábio Cícero
| 143.3k xp | 74 posts
Desenvolvedor Web

Estou criando um site em wordpress na empresa, e organizei todos os arquivos .css separadamente, assim como os .js.

Porém em meu header.php está da seguinte maneira:

<link rel="stylesheet" href="<?= $home ?>/vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="<?= $home ?>/style.css">

<link rel="stylesheet" href="<?= $home ?>/assets/css/comum.css">
<link rel="stylesheet" href="<?= $home ?>/assets/css/header.css">
<link rel="stylesheet" href="<?= $home ?>/assets/css/footer.css">

<link rel="stylesheet" href="<?= $home ?>/assets/css/<?= $css_especifico ?>.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

Tenho várias importações de arquivos de estilo. Tenho preocupação quanto ao número de requisições que esse arquivo terá que fazer. É recomendável eu juntar todos em um arquivo só e minificar. Sem usar o gulp, eu posso mesclar esses arquivos com o import do css?

Por exemplo, criar um aquivo style.css e colocar import de arquivos .css logo no seu início? É a melhor maneira a se faze? Pois gostaria de deixar os arquivos separados para facilitar a manutenção, mas sem pesar o carregamento da página. Como consigo fazer isso sem utilizar o gulp para mesclar os arquivos?

http://prntscr.com/gv8spw

6 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

O import do css faz vários requests por debaixo dos panos, não iria resolver seu problema.

Você pode analisar isso na aba network do seu navegador.

A unica forma estável atualmente é usando gulp ou alguma ferramenta de build.

por Fábio Cícero
| 143.3k xp | 74 posts
Desenvolvedor Web

Na sua opinião então é melhor usar o gulp para mesclarar o arquivos em um só e após isso minificar. Ou juntar deixar apenas existente um style.css , com separação por comentários? Tenho cerca de 1000 e poucas linhas juntando todos os arquivos..

por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Em termos gerais de performance mesmo, você poderia minificar tudo e tirar todos os comentários e ser feliz :)

Se quiser ir além nesses tópicos recomendo fortemente os cursos do Sérgio Lopes na parte de Performance no Front aqui da Alura \o

https://www.alura.com.br/curso-online-otimizacao-performance-web

por Fábio Cícero
| 143.3k xp | 74 posts
Desenvolvedor Web

Então Marcio, mas eu tenho 4 arquivos, sendo que apenas 1 (o index.css) eu não quero que seja carregado em todas as páginas. Apenas na index, eu tenho um código php pra isso:.

No index.php:

$css_especifico = 'index';
 require_once('header.php');

No header.php:

<link rel="stylesheet" href="<?= $home ?>/assets/css/comum.css">
<link rel="stylesheet" href="<?= $home ?>/assets/css/header.css">
<link rel="stylesheet" href="<?= $home ?>/assets/css/footer.css">

<link rel="stylesheet" href="<?= $home ?>/assets/css/<?= $css_especifico ?>.css">

No index.php eu quero que carrega esse css especifico, em outras páginas não.

Devo minificar os 3 arquivos essenciais(footer, header, e comum.css) e importar eles em todas as páginas, mas e o index.css como fica? Sendo que ele não pode entrar nessa minificação.

Seria um styleindex.css?

solução!
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Você pode criar na sua pasta css duas pastas

/css/commons
/css/individuals

Os individuais você carrega de acordo com a página e o da commons vc gera um bundle de um arquivo só

por Fábio Cícero
| 143.3k xp | 74 posts
Desenvolvedor Web

Boa idéia! Obrigado