Como gestionar archivos CSS sin tanta tool

Publicado en Snippets · 05 octubre 2016.

Llevo bastante años haciendo páginas webs y uno, a base de palos, termina escarmentado de aprender todo lo que sale y de aprender las herramientas más cool. Eso no quiere decir que esté estancado en no aprender algo nuevo. Nada más lejos de la realidad. Lo que no caigo es el consumismo que se ha impuesto entre los desarrolladores de software. Por mi parte, si algo me funciona, no lo toco. A no ser que lo que lo sustituya incluya mejoras significativas.

Un ejemplo por lo yo entiendo del consumismo de desarrollo son las herramientas de gestión de assets( archivos js, archivos css, imágenes ). No dudo que algún desarrollador de verdad le saque bastante partido pero no creo que lo haga la mayoría. Durante la WordCamp hablando con un colega de PHP-Sevilla me di cuenta que algunos podrían no conocer la alternativa de hacerlo sin estas herramientas. Es por lo que me he decidido a escribir este post haciendo un gestor de assets CSS a medida( os dejo de ejercicio para casa el hacerlo con javascript ). Veremos en el post que será simple pero no implica que no sea potente.

El código de todo está en mi Github. Vamos a ir viendo uno a uno cada archivo: Si has usado WordPress este sistema te resultará familiar. Lo que hacemos es ir encolando archivos css( línea 28 ) pero antes, hemos incluído la clase Assets(línea 11 ) y hemos obtenidos las variables de configuración(línea 22) asociado al archivo de nombre site.conf( línea 9 ).

Las variables de configuración nos permitirá adaptar la apariencia de la página sin tocar el archivo .css. Muy útil para que nuestro cliente o usuario pueda cambiar colores, fuentes, ... lo más adecuado sería que hubiera una area administrativa en el que usuario pudiera cambiar colores u otros aspectos de la web muy fácilmente. Sin embargo, para simplificar el post, estas variables se guardan en un archivo .ini con el siguiente contenido o similar: Fíjate que incluso se puede permitir que añada pequeños trozos de código incrustado. Dentro del hipotetico panel de control comentado antes, podría haber un editor que lo facilitara.

Esta forma de trabajar evita que luego se tenga que añadir el código CSS en medio del html como, por desgracia, se ve a menudo y que resulta poco eficiente( ya que no es cacheado por navegadores ) para la página. La clase Assets también es muy sencilla y, como comentábamos arriba, se encarga de encolar archivos CSS. Antes se encarga de comprobar si se debe de generar un archivo minimizado( ya sea porque no existe la versión minimizada o la versión sin minimizar se hubiera modificado ). Si se debe de generar, primero se parsea el contenido del CSS sin minimizar por un prepocesador LESS que junto a las variables de configuración crean un contenido no LESS minimizado que se guarda como archivo minimizado. Una vez terminado el parseo se encola el archivo minimizado. archivo CSS sin parsear archivo CSS una vez parseado por el preprocesador LESS y minimizado.


El compilador que he utilizado( lessphp ) puede realizar todo el asunto de las comprobaciones de actualización. Sin embargo, por considerarlo un punto importante, lo he hecho de un modo explícito. Este compilador también permite opciones de unificación mediante @import ( en servidor, no en cliente ). Así podemos hacer un uso adecuado a dicha directiva.

Como se ve, con unas pocas líneas, tenemos un gestor de archivos CSS simple y potente. Además, integrado con nuestro sistema. No necesitamos aprender herramientas para gestionarlas. Ni siquiera LESS si no queremos.

¡ Compártelo !
Este sitio utiliza cookies propias y de terceros para mejorar tu experiencia con el sitio web. Al continuar con la navegación consideramos que acepta su uso.