¿Cuáles son los inconvenientes de usar PHP para crear variables en mi hoja de estilo CSS?

Question

Una desventaja importante de CSS es que no se pueden usar variables. Por ejemplo, me gustaría usar variables para controlar la ubicación de CSS importados, y sería increíble crear variables para colores que se usan repetidamente en un diseño.

Un enfoque es utilizar un archivo PHP para la hoja de estilos CSS. En otras palabras, crear un "style.php" con ...

<?php header("Content-type: text/css"); ?>

... en la parte superior del archivo, y luego enlazar con él usando ...

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

... en cualquier archivo que use estos estilos.

Entonces, ¿cuál es el truco? Creo que podría ser el rendimiento: hice algunos experimentos rápidos en Firefox/Firebug y, como era de esperar, la hoja de estilos CSS está almacenada en la memoria caché, pero la hoja de estilo PHP no lo está. Así que estamos pagando el precio de un GET adicional.

La otra cosa molesta es que TextMate no resalta correctamente la sintaxis para CSS en un archivo .php.

¿Hay otros inconvenientes? ¿Ha utilizado este enfoque y, de ser así, lo recomendaría?

Answer 1

El rendimiento es más o menos. Es una buena idea, pero solo si la guardas en caché. Puede enviar encabezados de navegador para pedirle al cliente que lo guarde en caché, pero si el rendimiento es un problema, puede beneficiarse de desarrollar un sistema mediante el cual compile sus hojas de estilo habilitadas para PHP a los archivos CSS de vanilla para que funcionen normalmente.

Si se va a molestar en hacer rodar manualmente su propio sistema de compilación, en su lugar, puede consultar SASS.

Answer 2

El inconveniente es que el archivo no está en la memoria caché (como ha señalado), así como el hecho de que el servidor debe calcular el archivo CSS para CADA solicitud.

Cargando el archivo estático es prácticamente inútil para el servidor, ya que solo lee y vuelca el archivo, pero para el script PHP tendrá que ejecutarlo para cada solicitud de página, lo que podría agregar una sobrecarga adicional.

Posiblemente pueda almacenar en caché el CSS en la memoria o Memcache o algo así, pero eso no será tan eficiente como el uso de un archivo estático.

¿Por qué no definir la mayoría de su CSS en un archivo estático y luego anular los estilos específicos que cambian?

Answer 3

Debería poder establecer los encabezados HTTP apropiados para indicar al navegador que guarde en caché el CSS generado dinámicamente. Usted puede estar interesado en probar el siguiente artículo de Google Code para la lectura adicional sobre el tema:

• Optimize caching: Leverage browser caching

También podría considerar la generación de un archivo CSS estática de su guión, y luego son que a partir de su documento web Esto elimina el preprocesamiento en tiempo real y cualquier preocupación de rendimiento relacionada con eso, a costa de tener que "compilar" sus archivos CSS siempre que los modifique.Sin embargo, si ya tiene minifying CSS o JavaScript, simplemente puede agregar este paso adicional a su proceso de compilación.

En cuanto al resaltado de código, es posible que desee utilizar archivos CSS normales con variables en ellos en lugar de constantes codificadas. Entonces su preprocesador php puede cargar el archivo CSS y sustituye las variables por los valores reales.

Answer 4

No es exactamente una respuesta, sino una adición a la respuesta de @Matchu.
Aquí hay un código sni [et que utilicé hace varios años. Puede comenzar a jugar a partir de eso como base para desarrollar su propio método de reglas de caché del lado del cliente. Cualquiera que sienta que puede mejorar eso, sea bienvenido.

<?php 

//functions to cache HTML output Or JS/CSS output from a PHP script 

class ControlHtmlCache 

{ 

    //Will cache output of a php script on the browser for the giver hours. 

    //Do notice, this will not cahce from now until now+hours, but rather for a rounded time period in the time stamp 

    //For example, If I send 4 it will refresh the cache at approx 3,7,11,15,19,23 (In the summer, it will be 4,8,12....) 

    static function client_side_cache($hours) 

    { 

     //in the event a session start is used, I have to clean all the #$%# headers it sends to prevent caching 

     header('Cache-Control: ',true); 

     header("Pragma: ", true); 

     header("Expires: ", true); 



     //get the If-Modified-Since header in a unix time format 

     $headers = getallheaders(); 

     if (isset($headers['If-Modified-Since'])) 

     { 

      $modifiedSince = explode(';', $headers['If-Modified-Since']); 

      $modifiedSince = strtotime($modifiedSince[0]); 

     } 

     else 

     { 

      $modifiedSince = 0; 

     } 



     //calculate the Last-Modified timestamp 

     $current_time=time(); 

     $last_modified=($current_time)/($hours*3600); 

     $last_modified=(int)$last_modified; 

     $last_modified=$last_modified*$hours*3600; 



     //check cache not expires 

     if ($last_modified <= $modifiedSince) 

     { 

      header('HTTP/1.1 304 Not Modified'); 

      exit(); 

     } 

     else //emit a new Last-Modified (either cache expired or page wasn'r cached 

     { 

      Header('Last-Modified: '.gmdate("D, d M Y H:i:s",$last_modified).' GMT '); 

     } 

    } 

}//EOF class