Tailwind CSS vs CSS moderno: ¿todavía necesitás un framework?

En el mundo del desarrollo frontend, CSS ha sido siempre una pieza fundamental. Con los avances recientes en CSS moderno y la popularidad de frameworks como Tailwind CSS, muchos desarrolladores se preguntan si todavía es necesario usar un framework. En este artículo, vamos a explorar las diferencias entre Tailwind CSS y CSS moderno, y cuándo puede ser más conveniente optar por uno u otro. Vamos a sumergirnos en las características avanzadas de CSS como el nesting, las container queries, el selector :has(), las cascade layers, y la función color-mix.

Tailwind CSS vs CSS moderno

Tailwind CSS es un framework utility-first que ha ganado popularidad por su enfoque único de estilo en el desarrollo web. En lugar de crear clases personalizadas para cada componente, Tailwind te permite aplicar estilos directamente en el HTML usando clases predefinidas. Esto puede resultar en un flujo de trabajo muy rápido, pero también puede generar HTML más grande y menos legible.

Por otro lado, CSS moderno ha incorporado nuevas características que mejoran significativamente la forma en que escribimos estilos. Estas mejoras hacen que el uso de un framework de CSS como Tailwind no sea siempre la única opción viable. Por ejemplo, con el nesting, podés escribir estilos de una manera más estructurada y limpia, similar a lo que podías lograr con preprocesadores como Sass.

Veamos en detalle las diferencias clave y cuándo podrías considerar usar Tailwind CSS o CSS moderno por sí solo.

Nesting en CSS moderno

El nesting es una de las características más esperadas en CSS moderno. Permite anidar selectores dentro de otros selectores, lo que ayuda a mantener el código organizado y más fácil de leer. Con el nesting, podés evitar la repetición de selectores y mantener una jerarquía clara.

/* Ejemplo de nesting en CSS moderno */
.container {
    display: flex;
    > .item {
        flex: 1;
    }
}

En Tailwind CSS, el enfoque es diferente ya que no se usa nesting. Las clases utility-first son aplicadas directamente en el HTML. Esto puede ser ventajoso cuando querés prototipar rápidamente, pero también puede hacer que el HTML se vuelva más verboso.

<div class="flex">
    <div class="flex-1">Item</div>
</div>

Si estás trabajando en un proyecto donde la estructura y mantenibilidad del CSS es primordial, el nesting en CSS moderno puede ser una mejor opción.

Container Queries

Las container queries son una de las adiciones más poderosas a CSS moderno. A diferencia de las media queries que dependen del tamaño de la ventana, las container queries permiten aplicar estilos basados en el tamaño del contenedor. Esto es ideal para componentes reutilizables que necesitan adaptarse a diferentes contextos.

/* Ejemplo de container queries */
.container {
    container-type: inline-size;
}
@container (min-width: 500px) {
    .child {
        font-size: 1.5rem;
    }
}

Tailwind CSS no soporta container queries de forma nativa, por lo que tendrías que incorporar algún tipo de JavaScript o CSS adicional para lograr un efecto similar. Este es un punto donde CSS moderno claramente tiene la ventaja.

Para proyectos que requieren diseños altamente adaptables, CSS moderno con container queries ofrece una flexibilidad que Tailwind CSS no puede igualar sin complejidad adicional.

El selector :has()

El selector :has() es otra de las características avanzadas de CSS moderno. Este selector permite aplicar estilos basados en el contenido de un elemento hijo. Es increíblemente poderoso para gestionar estados de interfaces de usuario sin necesidad de JavaScript.

/* Ejemplo usando :has() */
form:has(input:invalid) {
    border-color: red;
}

Tailwind CSS, al ser un framework utility-first, no ofrece una funcionalidad equivalente a :has() sin recurrir a JavaScript. Esto puede ser una limitación si tu proyecto requiere estilos basados en la presencia de ciertos elementos o estados.

En mi experiencia con RHINO, el uso de :has() simplificó notablemente la validación visual de formularios, algo que con Tailwind requería más código del necesario.

Cascade Layers

Las cascade layers son una nueva forma de gestionar la cascada de CSS. Te permiten definir capas de estilos que pueden ser ordenadas para asegurar que ciertos estilos tengan prioridad sobre otros. Esto es especialmente útil en proyectos grandes donde el orden de los estilos puede volverse complicado.

/* Ejemplo de cascade layers */
@layer utilities {
    .text-center {
        text-align: center;
    }
}
@layer components {
    .button {
        @apply text-center;
        background-color: blue;
    }
}

Tailwind CSS incorpora algo similar con su sistema de "layers", pero maneja la especificidad de una manera diferente. Con CSS moderno, tenés más control sobre cómo y cuándo se aplican los estilos.

Para proyectos como Menteo AI, donde la especificidad y el orden de los estilos eran críticos, el uso de cascade layers en CSS moderno proporcionó una solución más robusta.

Color-Mix

La función color-mix() de CSS moderno permite mezclar colores directamente en CSS. Esto es útil para generar paletas de colores y efectos de gradient dinámicos sin recurrir a herramientas externas.

/* Ejemplo de color-mix() */
.element {
    background-color: color-mix(in srgb, red 50%, blue 50%);
}

En Tailwind CSS, tendrías que definir las combinaciones de colores por adelantado o usar plugins adicionales. Esto puede ser una limitación en proyectos donde los colores dinámicos son necesarios.

En proyectos como Merchant Hub Akua, donde los colores de marca eran esenciales y cambiaban con frecuencia, CSS moderno con color-mix() ofreció una flexibilidad que Tailwind no pudo igualar sin personalización extensa.

¿Cuándo usar Tailwind CSS?

Tailwind CSS es ideal cuando necesitás crear interfaces rápidamente y no estás tan preocupado por el tamaño del HTML o la estructura del CSS. Es perfecto para prototipado rápido y proyectos donde el diseño puede cambiar frecuentemente.

En mi experiencia, usé Tailwind CSS en proyectos internos de RHINO donde la velocidad de desarrollo era más importante que la mantenibilidad del código. La capacidad de aplicar estilos directamente en el HTML permitió iteraciones rápidas y efectivas.

Sin embargo, si el proyecto crece o se vuelve más complejo, puede ser necesario refactorizar el código para mejorar su mantenibilidad. En estos casos, es posible que CSS moderno ofrezca una solución más sostenible a largo plazo.

¿Cuándo usar CSS moderno?

CSS moderno es la mejor opción cuando la mantenibilidad, la estructura y el rendimiento del CSS son prioridades. Las nuevas características como nesting, container queries, :has(), cascade layers, y color-mix ofrecen un control detallado y una flexibilidad que pueden ser esenciales en proyectos grandes.

Para proyectos como Menteo AI, donde la escalabilidad y la reutilización de componentes eran cruciales, el uso de CSS moderno permitió un código más limpio y fácil de mantener. Las container queries y el selector :has() fueron particularmente útiles para crear interfaces adaptables sin agregar complejidad innecesaria.

CSS moderno también es ventajoso cuando trabajás en equipos grandes, ya que ofrece patrones más claros y consistentes que facilitan la colaboración y el entendimiento común del código.

Conclusión

En última instancia, la elección entre Tailwind CSS y CSS moderno depende del contexto de tu proyecto. Tailwind CSS puede acelerar el desarrollo en etapas iniciales y en proyectos de prototipado rápido, mientras que CSS moderno ofrece una solución más robusta para aplicaciones escalables y mantenibles a largo plazo. La clave está en evaluar las necesidades específicas de tu proyecto y elegir la herramienta que mejor se adapte a ellas. Si tenés preguntas o querés discutir más sobre este tema, no dudes en contactame.