0

Em muitos projetos venho escrevendo CSS com PHP, o que é uma prática bem desconhecida mas que atendente todas as necessidades de dinamização, exemplo...

CSS

<?php

header("Content-type: text/css");
$cor_fundo = "#999";    

?>

body {
background: <?=$cor_fundo?>;
}

HTML

<link rel="stylesheet" href="estilo.php" type="text/css" />

Pré processadores como LESS e SASS tem a mesma proposta, então qual a diferença quando comparados com PHP? há algum problema em escrever CSS com PHP?

2 Respostas 2

2

A diferença é que o PHP processa no lado do servidor, ou seja para o usuário vai realmente chegar um arquivo CSS. Já que o front-end não interage diretamente com o back-end.

Já o LESS/SASS e afins podem ser processados pelo navegador usando JavaScript, o que ocorre no lado do cliente, exemplo com LESS:

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

No entanto dependendo da configuração você pode converte o less para css no lado do servidor também, usando Node.js ou então libs de terceiros.

Note que geralmente as pessoas convertem por linha de comando os arquivos LESS e SCSS/SASS, exemplo com LESS:

lessc meusestilos.less meusestilos.css

Exemplo com SCSS:

sass input.scss output.css

Como citei antes é possível usando Node.js resolver diretamente no lado do servidor, mas acaso não possa ter o Node.js em seu servidor, existem a soluções de terceiros que citei anteriormente para "compilar" (processar) LESS, SCSS e SASS com PHP para CSS:

Nota: O SASS possui uma série de ferramentas para diferentes linguagens, que eles mesmos indicam: http://sass-lang.com/libsass

Uma coisa importante para citar é que LESS e SASS/SCSS possuem muitas funcionalidades prontas, claro que se você só usa o básico do CSS, então o seu script PHP deve atender bem, acaso queira mais funcionalidades então seria interessante estudar um deles, less ou scss, a escolha vai conforme a sua necessidade.


Aproveite e de uma lida nisto:

1

A diferença é que ferramentas como Less/Sass fornecem todas essas características de gerar um CSS dinâmico muito próximo do CSS vanilla. A sintaxe de um arquivo Less pode facilmente ser escrita e entendida por um desenvolvedor CSS, pois não é muito diferente do que ele está acostumado. Já fazer isso com PHP exigiria conhecer uma nova linguagem.

Arquivo LESS retirado de http://lesscss.org:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Arquivo CSS resultado do código acima:

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

Perceba que a sintaxe é muito próxima. Inclusive, muitas ferramentas implementam uma sintaxe quando sabem que esta será implementada oficialmente no CSS futuramente. Por exemplo, já vi ferramentas que utilizavam mixins do sistema de grid exatamente com a sintaxe do grid presente hoje no CSS. Isso permite que o desenvolvedor possa migrar para o CSS mais moderno sem alterações em seu código.

Já, fornecer o código CSS via PHP não apresenta nenhum problema grave. Enviando corretamente os cabeçalhos da resposta HTTP e formatando corretamente o CSS, não terá problemas. Uma diferença é que enquanto as ferramentas como Less/Sass geram um arquivo CSS estático, o PHP gerará o arquivo a cada requisição; isso pode afetar o tempo de resposta da requisição dependendo diretamente do tempo de execução do código PHP. Uma das vantagens de se utilizar o PHP para gerenciar isso é a facilidade de controlar todos os cabeçalhos da resposta HTTP, principalmente os relacionados ao cache.

Abaixo uma lista compilada das diferenças citadas. O sinal ✓ ao lado indica qual ferramenta apresenta melhores resultados para cada característica conforme minha opinião:

  1. Sintaxe do código;

    • LESS/SASS aproximam sua sintaxe para o vanilla; ✓
    • PHP possui uma sintaxe completamente diferente;
  2. Tempo de resposta;

    • LESS/SASS geram um arquivo CSS estático; ✓
    • PHP demanda ser executado a cada requisição, podendo aumentar o tempo de resposta;
  3. Necessidade dos cabeçalhos da resposta HTTP;

    • LESS/SASS os cabeçalhos são gerenciados pelo próprio servidor; ✓
    • PHP demanda que você controle manualmente os cabeçalhos;
  4. Gerenciamento dos cabeçalhos HTTP;

    • LESS/SASS os cabeçalhos são gerenciados somente pelo servidor;
    • PHP possibilita que você gerencie todos os cabeçalhos; ✓

Outra possível diferença também pode estar na possibilidade de enviar o CSS via server push do HTTP/2. Não sei afirmar se das formas formas seria possível de forma equivalente.

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 .