Muchos de nosotros aún tenemos la duda de cuál es el framework CSS mejor para nuestros proyectos 🤔, muchos nos dirán…

  • por popularidad: Bootstrap 🟣
  • por ser más puristas: “usa CSS puro” 🔵 (es este post lo llamaremos Vanilla CSS)
  • por la fiebre del momento: TailwindCSS 🟢

Pero al final solo nos dicen usa “esto”, pero no nos dan razones imparciales para decidir cuál es el mejor para nosotros 😟.

A continuación veremos cuál es la mejor opción, tratando de ser totalmente imparciales 😉 (Psdt: si aún no has visto el post sobre TailwindCSS lo puedes ver aquí 😅).

Definamos cada tecnología 👀⌗

En este cuadro te resumo lo que cada tecnología nos ofrece:

Bootstrap TailwindCSS Vanilla CSS
Framework de Componentes Framework de Utilería CSS puro
Elegimos componentes PRE-CONSTRUIDOS con estilos y clases utilitarias Nos brinda clases utilitarias para construir nuestros PROPIOS componentes Escribimos POR NUESTRA CUENTA todos los estilos y layouts

Pero…¿cómo se construye un componente con estas tecnologías? 🤔, aquí ejemplos:

Bootstrap⌗ 

<button class="btn btn-primary">Botón</button>

Solo escribimos dos clases que ya tienen estilos hechos; btn nos da el estilo del botón como tál y btn-primary es un modificador el cuál hace que el botón sea de un color azul, el texto blanco, etc.

TailwindCSS⌗ 

<button
  class="px-4 py-2 text-white bg-blue-500 hover:bg-blue-500 rounded"
>Botón</button>

Escribimos muchas clases, donde cada una solo significa una propiedad CSS con un valor (los cuales son muy descriptivos). Por ejemplo:

  • bg-blue-500: background-color: rgb(66,153,225); 🔵
  • rounded: border-radius: .25rem; ↪ ↩
  • text-white: color: rgb(255,255,255) ⚪

Vanilla CSS⌗ 

.button {
  color: #fff;
  border: none;
  padding: .5rem 1rem;
  background-color: rgb(66,153,225);
  border-radius: .25rem;
}
.button:hover {
  background-color: rgb(43,108,176);
}

<button class="button">Botón</button>

Tenemos que escribir desde cero los estilos, así mismo los estilos para los estados como :hover.

El “VERSUS” 🥊⌗

Ahora que definimos cada tecnología es momento ⏱ de decidir cuál debemos elegir 😨; pero primero te muestro esta imagen con las diferencias, que luego desglosaremos una por una:

Boostrap vs TailwindCSS vs Vanilla CSS

Ahora, ¿cuál debería usar? 🤷‍♂️, te diré los motivos por los que SÍ debes usar, pero también porque NO:

Vanilla CSS 🔵⌗

Razones por las que SÍ 🟩⌗

  • Clases a gusto: Tu decides como se llaman tus clases con ayuda de alguna arquitectura de CSS (por ejemplo: BEM).
  • NO código innecesario: Tu controlas el código que necesitas y vas a usar (CUIDADO puedes caer en código “spaghetti”).
  • Control total: Control absoluto de los estilos que escribes.

Razones por las que NO 🟥⌗

  • Desde Cero: Mucho trabajo por hacer.
  • Malas prácticas: Estas muy susceptible a escribir mal código (no seguir buenas prácticas).

Boostrap 🟣⌗

Razones por las que SÍ 🟩⌗

  • + Velocidad: La tiempo de desarrollo se reduce demasiado (solo agregas clases de componentes).
  • Buenas prácticas: Es soportado por la comunidad, por ende el código es de calidad.
  • No necesitas ser experto: No necesitas conocer CSS a fondo para empezar. Por esto Boostrap es muy popular.

Razones por las que NO 🟥⌗

  • Nada o poco control: Tratar de personalizar los estilos de Boostrap son muy complicados.
  • Código innecesario: Al usar Bootstrap tendrás estilos que talvés nunca utilices.
  • Todos los sitios se ven igual: Por la dificultad de personalizar el framework, se puede percibir que muchas páginas usan Bootstrap al ojo.
  • Aún usa JQUERY 😅: Para el momento que escribí este post, Bootstrap aún usa Jquery para las interacciones de sus componentes.

Pero el mismo día que se escribió este post se lanzó la versión alpha de Bootstrap 5 (puedes ver lo nuevo de Bootstrap aquí) donde se liberó completamente de JQUERY.

TailwindCSS 🟢⌗

Razones por las que SÍ 🟩⌗

  • + Velocidad: Al igual que Bootstrap, solo que agregas más clases.
  • Buenas prácticas: Es soportado por la comunidad, por ende el código es de calidad.
  • No necesitas ser experto: No necesitas conocer CSS a fondo para empezar.

Razones por las que NO 🟥⌗

  • Poco control (*): Tienes un control parcial de los estilos, además Tailwind te da la posiblidad de extender sus clases a tu gusto.
  • Código innecesario (*): Pero con la diferencia que ahora Tailwind ya viene con PurgeCSS, esto hace que solo las clases que utilizaste sea consideradas y las que no, las borra al momento de “compilar”.

Entonces… ¿cuál uso? 😕⌗

La respuesta es… 🥁🥁🥁 👉 DEPENDE 🙃, depende de…

  • el tiempo con el que cuentas 📅.
  • el tipo de proyecto que vas a realizar ✍🏼.
  • tu conocimiento de CSS 🧠.

Pero según mi punto de vista te puedo dar algunas pautas:

  1. Sí tú eres alguien que es experto en CSS y te gusta hacerlo todo por tí mismo, te gusta tener el control total de todos tus estilos: USA VANILLA CSS.
  2. Sí no eres gran conocedor de CSS, sin embargo quieres unos buenos resultados para algún proyecto más “privado” (como una intranet) ó quieres sacar un proyecto lo más rápido posible pero a la vez que se vea bien: USA un framework de componentes como BOOTSTRAP (también porque muchas plantillas lo usan deberías aprenderlo).
  3. Sí tú tienes conocimientos intermedios de CSS y quieres tener algún control sobre los estilos ó buscas un framework que te ayude a representar tu marca o identidad: USA un framework de utilería como TAILWINDCSS.

Mi error de novato 😭⌗

Cuando recién estaba comenzando en este mundo de la Web, conseguí algunos trabajos para empezar a poner en práctica lo que aprendía, pero en general lo que más me pedían era la funcionalidad (osea el backend) más que el diseño de una web, entonces por aprender más de CSS escribía estilos desde 0, pero el tiempo me ganaba ⏲😟.

Entonces necesitaba velocidad de desarrollo 🚅, ahí fue que escuche lo que es un framework, un framework de CSS llamada Boostrap y quedé fascinado con todo lo que ofrecía, tanto así que me olvide por completo de CSS y solo usaba lo que ofrece Bootstrap. Hasta que llegó un momento que necesitaba aprender CSS, pero de verdad 🔥💪.

Sin embargo, se me hizo muy difícil por un tiempo 😥 hasta que conocí a TailwindCSS y lo que pasó fue que poco a poco (con ayuda de Tailwind) me estaba quitando esa mala práctica de solo copiar y pegar componentes de otros frameworks que no dejaba de aumentar mis skills con CSS (ya que sus clases son muy descriptivas y me ayudaban a saber lo que en realidad estaba haciendo).

Cometí el error típico de novato: “Salté defrente al framework, sin saber las bases del lenguaje” 😞.

Conclusión⌗

En mi opinión, ni una tecnología es mejor que otra; sea CSS, PHP, frameworks de Javascript, etc… todos tiene un propósito específico ya que cada uno cubre una necesidad para los proyectos, NUNCA caigas en el error de decir que una tecnología es mejor que la otra ó hagas la típica pregunta de cuál es mejor ¿React o Vue? 🤨, puedes probarlas por tí mismo y ver cuál te gusta más o cuál te conviene para lo que quieras hacer 😉👋.