Hace un tiempo, mi compañero diego escribió varios artículos (como este) sobre frameworks para crear contenido web, más concretamente aquellos que se encargan de darle el diseño. Al final, los navegadores web sólo entienden HTML para la estructura, CSS para el diseño y JavaScript para, como decía mi profesor en esto, animar el contenido, aunque existen frameworks como Laravel o Django que parecen decir lo contrario. Parecen. Lo que vamos a hacer hoy aquí es explicar cuándo deberíamos elegir una opción u otra para darle forma al contenido HTML.

Aunque en el titular se menciona Tailwind y Bootstrap, a lo que me refiero con esos nombres es más bien a lo que algunos consideran que están en un punto medio entre CSS puro y un framework propiamente dicho y un framework completo. Ambos son frameworks, pero Bootstrap tiene casi todo ya hecho y Tailwind permite mucha más personalización. Ya estoy adelantando uno de los motivos para elegir una opción u otra, pero vamos a empezar con cuándo usar CSS.

Cuando elegir CSS puro para mi sitio web

El CSS puro es cuando uno escribe todas las reglas manualmente usando selectores. Por ejemplo, cuando quiero que una barra de navegación esté con fondo rojo y que los enlaces estén de otro color y centrados, debo escribir algo como lo siguiente, suponiendo que el navegador de destino soporte reglas anidadas.

nav {
    background-color:red;
    color:blue;
    margin:0;
    text-align: center;
    a {
        padding: 10px;
        color:white
    }
}

A lo anterior aún habría que sumarle algo si queremos que esa sencillísima – y mal diseñada, todo hay que decirlo – barra de navegación quedara pegada a los bordes, y es hacer que el cuerpo del documento no tenga márgenes. De lo contrario, los navegadores muestran un borde alrededor de todo.

Y así con todo.

• Lo bueno:
  • Usando CSS puro tenemos todo el control sobre lo que creamos.
  • No tenemos que añadir varios archivos para que todo funcione, y mucho menos instalar el framework en nuestro proyecto.
• Lo malo:
  • Escribir todo el CSS a mano puede venir bien en UN proyecto SENCILLO, pero no tanto si el proyecto es complejo o tenemos que crear muchas páginas web. Empezar siempre de cero es costoso, no se paga y es el motivo por el que existen los marcos de trabajo.

Cuándo elegir Bootstrap (u otro framework «completo»)

Bootstrap y la mayoría de frameworks CSS – y no CSS – se crean pensando en la productividad. Suelen tener una filosofía en mente conocida como «escribe menos, haz más». Como norma general, son unos archivos CSS, y puede que también JavaScript, que lo tienen todo listo para empezar a usar.

A diferencia del CSS puro, que trabaja con selectores, Bootstrap y otras opciones similares usan clases que se incluyen dentro de la etiqueta de un elemento. Por ejemplo, si lo que queremos es crear un encabezado de tipo 1 (h1) con texto azul, fondo rojo y una separación interior, deberemos escribir algo como esto:

<h1 class="text-primary bg-danger p-2 text-center">Esto es el texto</h1>

No sé si os habéis fijado en que he usado «primary» y «danger» para los colores, y es que Bootstrap tiene varios para menús, botones y mensajes. Si queremos usar otros, tenemos que usar CSS propio y sobrescribir las reglas de Bootstrap. Eso o editar el archivo .css del framework.

• Lo bueno:
  • Hay documentación y ejemplos para crear elementos rápidamente.
  • Es responsivo y mobile first.
  • Las páginas web se pueden crear rápidamente, incluso sin saber mucho de Bootstrap si se cogen los ejemplos de su documentación.
• Lo malo:
  • Crear una página con Bootstrap y hacerlo rápido deja claro qué has usado para su diseño.
  • Muy poco personalizable si no se aplican reglas y retoques propios.

Cuándo elegir Tailwind

Tailwind es también un framework, pero muchos lo colocan entre el CSS puro y el resto de marcos de trabajo por no tener un estilo propio característico. Nada más instalarlo, veremos cosas como que todos los encabezados tienen el mismo tamaño, y eso es porque tiene un buen reset para que sea el usuario el que lo controla todo. Para conseguir el encabezado tipo 1 del ejemplo de Bootstrap, Tailwinds nos pide algo así:

<h1 class="text-blue-500 bg-red-600 p-2 text-center text-xl">Esto es el texto<h1>

Hay similitudes y diferencias con respecto a la clase combinada de Bootstrap. Por ejemplo, el margen interior o padding es igual, cada uno con sus tamaños, pero misma sintaxis, y la clase para centrar el texto también. Ya más diferentes son las de los colores. Mientras que Bootstrap por defecto sólo incluye unos colores que son el primario, secundario, peligro, aviso, etc, Tailwind ofrece una gama mucho más variada, y se puede poner un color con hasta 9 tonos diferentes. Para conocerlos todos, merece la pena leer la documentación oficial.

• Lo bueno:
  • Se dice que es más ligero que otros frameworks.
  • Nosotros tenemos todo el control sobre lo que diseñamos; no dependemos de una base definida.
  • Los nombres de las clases son más parecidos al CSS puro.
• Lo malo:
  • Su instalación no es la más sencilla. Aunque se puede usar con un CDN añadido a la etiqueta head, esto no se recomienda para un proyecto serio.
  • Tailwind CSS es en parte un pre-procesador de textos como Sass y necesitamos un archivo de entrada que se compilará y traducirá todo a CSS puro.
  • El HTML no queda muy limpio; un elemento con muchos estilos puede tener una clase enorme, pero esto tiene solución, aunque hay que aprenderla.

grid y flex con frameworks CSS

Esto es tanto algo positivo de los frameworks como algo negativo del CSS puro. Hay ediciones más fáciles que otras, y controlar los grid y flex de CSS puede ser complicado. Los frameworks han pensado en ello, y por ejemplo Bootstrap tiene una solución sencilla basada en 12 columnas.

Supongamos que tenemos un menú o algo similar con 6 elementos y queremos que se vayan acomodando dependiendo del ancho de la pantalla, también conocido como viewport. Para hacerlo con CSS puro hay que tirar de media queries, que es como una consulta que hace el navegador sobre el tipo de pantalla desde dónde estamos visitando un contenido. El CSS incluiría un @media para cada ancho de pantalla, y en cada uno de ellos deberíamos reajustar la «rejilla». Esto Bootstrap lo soluciona así:

<div class="row text-center">
    <div class="col-12 col-md-6 col-lg-4 col-xl-2 bg-primary">texto</div>
    <div class="col-12 col-md-6 col-lg-4 col-xl-2 bg-warning">texto</div>
    <div class="col-12 col-md-6 col-lg-4 col-xl-2 bg-danger">texto</div>
    <div class="col-12 col-md-6 col-lg-4 col-xl-2 bg-success">texto</div>
    <div class="col-12 col-md-6 col-lg-4 col-xl-2 bg-secondary">texto</div>
    <div class="col-12 col-md-6 col-lg-4 col-xl-2 bg-info">texto</div>
</div>

Las clases anteriores indicarían:

• col-12: en el tamaño «normal», que Bootstrap toma como tal las pantallas móviles, cada elemento ocupará el total (12/12), lo que hará que haya seis filas una debajo de la otra ocupando todo el ancho de pantalla. Se puede omitir, ya que es el comportamiento por defecto.
• col-md-6: en las pantallas medianas, cada elemento ocupará la mitad (6/12), por lo que habrá dos arriba, dos al centro y dos abajo.
• col-lg-4: en las pantallas grandes, cada elemento ocupará la tercera parte (4/12), por lo que habrá tres arriba y tres abajo.
• col-xl-2: en las pantallas más grandes, cada elemento ocupará la sexta parte (2/12), por lo que, como hay 6 elementos, se mostrará una fila con los seis.

Más información sobre grid en Bootstrap.

Conclusión

Los marcos de trabajo y este tipo de herramientas se crean para ir a mejor, y tienen sentido, sobre todo, cuando necesitamos producir de manera eficiente. Cuando haya que usar poco CSS, probablemente sea mejor no calentarse la cabeza y meterlo a mano. Cuando queremos algo rápido sin importarnos mucho la personalización, algo como Bootstrap puede ser la solución. Y si queremos tener todo el control, aunque con ello tengamos que trabajar un poco más, el punto medio, Tailwind.