Cuando empezamos un projecto nuevo, el mundo está lleno de posibilidades. Todo reluce, no hay guarradas, y tenemos la posibilidad de elegir qué herramientas emplear.
Una de las elecciones más importantes es la selección del framework CSS. Este nos acompañará hasta que el proyecto muera.
En este artículo, no voy a elegir por ti. Tampoco voy a intentar convencerte de elegir uno sobre otro. Entiendo que cada proyecto es diferente. Lo que si voy a hacer es exponer los diferentes tipos de frameworks CSS que podemos usar y qué ventajas tienen unos sobre otros.
Yo particularmente no lo haría. Así de simple.
Para proyectos serios, es dificil justificar esta elección. Hay que tomar muchas decisiones, ser disciplinado, tener conocimientos avanzados de CSS y de cómo estructurar tus hojas de estilos. Emplearás mucho tiempo trabajando y organizando CSS en lugar de construyendo tu proyecto.
Solo elegiría esta opción para projectos muy simples o como método de aprendizaje.
Este tipo de framework es algo nuevo. Se basan en exponer multitud de clases CSS auxiliares. Basicamente, exponen una clase para cada valor posible que pueda adquirir una propiedad CSS. Tachyons o Tailwind se encuentran en esta categoría.
Ejemplo extraído de la página de Tailwind.
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="rounded-lg md:w-56" src=".../imagen.jpg" alt="Woman paying for a purchase">
</div>
<div class="mt-4 md:mt-0 md:ml-6">
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
<a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
<p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
</div>
</div>Como ves, a cada div se le aplican multitud de clases para darle el estilo deseado. No te preocupes, se pueden agrupar clases bajo un "alias" para mejorar la mantenibilidad.
¿Usaría este tipo de frameworks para un proyecto serio?
Sí, pero solo cuando el proyecto no vaya con prisas y se deba fidedignamente reflejar el trabajo de un diseñador gráfico. ¿Por qué? Pues porque el diseñador gráfico habrá definido un estilo muy particular que será dificilmente realizable empleando cualquiera de las otras opciones expuestas sin hacer guarradas o entrando en guerra contra el framework CSS.
Este tipo de framework ha existido desde hace bastantes años. Algunos de los más conocidos en esta categoría son Bootstrap, Foundation o Bulma.
Cuentan con la ventaja de una amplia comunidad y su integración en cualquier proyecto web suele ser fácil. Permiten personalizar la paleta de colores, margenes, padding, tamaño de letra, etc. Ofrecen clases auxiliares para realizar layouts, así como clases para aplicar estilos a los elementos Html.
¿Usaría este tipo de frameworks para un proyecto serio?
Sí, especialmente si no se dispone de un diseñador gráfico o el proyecto debe de realizarse en un plazo de tiempo reducido. Permiten separar el estilo de cualquier framework que elijas (React, Angular, Vue o Ember). Nos permiten avanzar rápido, sin demasiadas complicaciones, obteniendo un resultado bastante profesional.
¿Cuál de los frameworks es mejor? Bootstrap, Foundation, Bulma, ... ?
Sinceramente, todos ofrecen mas o menos las mismas características. Elegiría aquel que presente un estilo más acorde con lo que busco, para evitar entrar en guerra contra el. El objetivo es emplear el framework para conseguir resultados rápidos.
Si al elegir uno de estos frameworks CSS de clases, te encuentras constantemente sobreescribiendo propiedades relacionadas con selectores pertenecientes al framework, estás luchando contra el framework. Cuando tengas que realizar actualizaciones o migrar a nuevas versiones, verás que has pérdido la guerra contra él.
Estamos hablando de una librería de componentes para un framework JavaScript (React, Vue, Angular o Ember) en lugar de un framework CSS. Estas librerías proporcionan componentes con un estilo CSS definido, fácil de integrar con el framework JavaScript seleccionado y permitiendo personalizar el framework CSS pero no tanto como los framework CSS de clases.
¿Usaría este tipo de frameworks para un proyecto serio?
Muy posiblemente, no. La principal razón es que he subcontratado la unidad más básica con la que voy a trabajar en el frontend: los componentes.
Mi proyecto web está formado por componentes y la composición de estos. Eligiendo una librería de componentes, mi proyecto depende de que esta librería sea mantenida y actualizado a las últimas versiones de React (o cualquier framework JavaScript). Si esto no sucede, no podré actualizar el framework JavaScript de mi proyecto.
Por tanto, eligiendo una librería de componentes para dar estilo a mi proyecto he atado mi proyecto a la versión específica que este use. No podré actualizar mi framework JavaScript hasta que la librería de componentes de soporte a la versión a la que quiero actualizar.
En resumen, emplearía una librería de componentes para crear prototipos o webs que tengan un corta vida (un par de años máximo).
En este artículo hemos revisado los diferentes tipos de frameworks CSS que podemos encontrar (incluyendo las librerías de componentes) y cuál es más adecuado dependiendo del tipo de proyecto al que nos enfrentemos.