Como minimizar y optimizar el CSS para la web

Es necesario optimizar el código CSS para para mejorar los tiempos de carga y el rendimiento de las páginas.
Se hace eliminando elementos y espacios innecesarios, lo que reduce el tamaño de estos archivos y acelera su lectura y renderación por los navegadores.
Este proceso se conoce como "Comprimir CSS", aunque lo más correcto es referirlo como "Optimizar CSS".
En internet hay disponible gran cantidad de compresores CSS online.
En nuestro sitio creamos y compartimos un Compresor CSS que funciona con PHP y reduce al máximo el tamaño de estos archivos, sin afectar su funcionamiento.
En este artículo explicamos cómo funciona y compartimos el código para los que deseen crear su propia herramienta.

Como limpiar y comprimir el CSS

En su formato predeterminado el código de estilo CSS incluye gran cantidad de espacios en blanco entre caracteres, para facilitar su comprensión, edición y desarrollo.
Además generalmente se incluyen comentarios por los desarrolladores, para explicar el funcionamiento de algunas reglas o incluso para dividir secciones.
Todo esto aumenta el tamaño de estos archivos.
Los archivos CSS que se distribuyen en internet ya optimizados y minimizados, usan el siguiente formato: "nombre.min.css".
Para optimizar el CSS tenemos las siguientes opciones:
1- La más importante es eliminar los espacios en blanco innecesarios entre caracteres, que verdaderamente es comprimir.
Por ejemplo en la siguiente regla existen varios espacios innecesarios:

h1 {
  font-size: 2em ;
  margin: 0.67em 0 ;
}

Al comprimirla se obtiene:

h1{font-size:2em;margin:0.67em 0;}

2- Eliminar comentarios (opcional).
Un comentario en CSS luce de la siguiente forma y en ocasiones aún más excesivos:

/**
 * Corrige el tamaño de fuente en el H1
 * Restablece el margen adecuado.
 */

3- Minimizar el código hex de colores. Por ejemplo: #000000; -> #000;
4- Combinar varios archivos CSS en uno solo.
En páginas que usan varios archivos externos CSS, al combinarlos se reduce el número de peticiones HTTP necesarias.
5- Algunos compresores eliminan el semicolon (;) antes del cierre del paréntesis de la regla, pero no lo recomendamos, porque hemos comprobados que causa error en varios navegadores.
Lógicamente todo lo anterior podemos hacerlo manualmente usando cualquier editor de texto plano, pero la tarea se complica cuando se trata de código extenso.
Además cualquier pequeño error puede traer consigo el mal funcionamiento de las páginas.

Optimizar el CSS con PHP

Todas las acciones anteriores podemos ejecutarlas con PHP, usando las funciones "preg_replace" y "str_replace".
Solo son necesarias unas líneas de código y ejecutar el archivo en formato PHP en un servidor local o en la red.
Podemos configurarlo completamente de acuerdo a nuestro interés.
Usamos para esta tarea modificándolo a nuestra forma, el código de On-the-fly CSS Compression, un proyecto en Github.

Código para crear un compresor CSS

Para crear esta herramienta copia y pega el siguiente código en un documento de texto y guárdalo con la extensión de archivo PHP.

<?php
$cssFile = "archivo.css"; 
$buffer = "";
$buffer .= file_get_contents($cssFile);
// Eliminar comentarios
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
// Eliminar espacios despues de los colons
$buffer = str_replace(': ', ':', $buffer);
// Eliminar espacios en blanco
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
$buffer = preg_replace( "/\s*([\{\}>~:;,])\s*/", "$1", $buffer );
echo($buffer);
?>

A continuación mueve el archivo a la carpeta del servidor local en Apache o ISS y ejecútalo con el navegador.

Configurar el compresor CSS

Haz los siguientes cambios en el código de la herramienta:

Combinar varios archivos CSS

Para combinar varios archivos css en uno simple, sustituye las primeras 3 línea del código por las siguientes:

$cssFiles = array(
"archivo1.css",
"archivo2.css"
);
$buffer = "";
foreach ($cssFiles as $cssFile) {
$buffer .= file_get_contents($cssFile);}

Pueden combinarse dos o varios de ellos.

Crear un formulario para insertar código CSS

Para crear un formulario donde se pueda insertar y pegar directamente el código CSS a optimizar, usa el siguiente código en el que se combina HTML y PHP.

<h1>Comprimir CSS</h1>
<form action="" method="post">
<textarea cols='80' rows='10' name="nombre">
</textarea><br>
<input type="submit">
</form>
<br>
<?php
$buffer = htmlspecialchars($_POST['nombre']);
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
$buffer = preg_replace( "/\s*([\{\}>~:;,])\s*/", "$1", $buffer );
if ($_POST) {
echo ($buffer);
}
?>

Se incluye la función "htmlspecialchars()" para impedir la inyección de código XSS/Html, si se piensa utilizar el formulario en la red.

¿Cómo descomprimir o restaurar el CSS?

Al optimizar o comprimir el código CSS afectamos su legibilidad y dificultamos su edición.
Si necesitamos en algún momento restaurar el formato predeterminado de alguno de estos archivos, podemos hacerlo fácilmente usando la siguiente herramienta de nuestro sitio: Descomprimir y corregir código CSS y JavaScript
Permite expandir y restaurar el código comprimido y minimizado manualmente o con cualquiera herramienta web.
También revisa, corrige y muestra el código resultante, en el formato predeterminado de CSS.
Además de CSS descomprime código JavaScript.