¿Cual es el mejor Framework CSS? 2022

Cuando adquieres experiencia construyendo varios sitios web, y tienes libertad de elegir tus herramientas, acabas buscando un conjunto de herramientas que optimicen tu trabajo y te vuelva más productivo. Los Frameworks CSS son fáciles de aprender, ofreciéndote una capa de abstracción que evita la repetición de ciertos componentes o formas de maquetar. Aunque también es cierto que puedes acabar usándolo por razones ajenas: te llama la atención, heredas el proyecto, lo recomienda un compañero, vas a trabajar en equipo… y, bueno, no olvidemos lo divertido que resulta probar nuevos sabores.

A continuación he seleccionado los que he podido probar por mi mismo y he realizado, como mínimo, un sitio completo. Destacaré todo lo bueno y malo, aunque siempre será una opinión personal. Después de analizarlos respondo a la pregunta que muchos os haréis en los comentarios: ¿Cual es el mejor Framework CSS? O lo que en realidad te quieres preguntar: ¿Qué Framework CSS se adapta a mi forma de trabajar?

Bootstrap

V5.1.1

Hablamos del segundo proyecto más exitoso de GitHub (153.000 estrellas), con una popularidad sin precedentes en el desarrollo Web. Nació como una simple herramienta interna de Twitter. Mark Otto y Jacob Thornton se encargaron de realizar un conjunto de estilos y patrones para dar homogeneidad a todas las Webs que se estaban creando dentro de empresa. Lo bautizada como Blueprint. En 2011 terminaron el desarrollo y lo hicieron público bajo el nombre de Bootstrap. Su gran uso a ayudado a que tenga una evolución, adaptándose a nuevos estándares, hasta llegar a nuestro días con Flex.

Ventajas:

• Componentes suficientes y configurables para cualquier proyecto.
• Enorme apoyo de la comunidad, con muchas extensiones y preguntas resueltas en foros.
• Documentación clara y rápida de consultar.
• Proyecto maduro con una larga trayectoria (7 años).
• Su Reset CSS (llamado Reboot), te permite usarlo de forma independiente al propio Bootstrap.
• El núcleo principal lo desarrolla un equipo experimentado de Twitter.
• Funcionalidades integradas en Javascript, sin dependencias externas.

Inconvenientes:

• Complejo a la hora de modificar sus estilos.
• Te obliga a maquetar con un HTML poco flexible.
• En la versión (v4) se dio un giro duro. Perdió la compatibilidad con versiones anteriores y navegadores que no usen Flex (Safari 10, iOS6, IE8, IE9…).

Enlace: https://getbootstrap.com/

Tailwind CSS

Version 2.2.15

Tailwind no es un Framework, o UI kit, como Bootstrap, Bulma o Foundation… No tiene temas, ni componentes prefabricados, ni Javascript, ni te impone un diseño que te pelearas para modificar. Son simples estilos, en concreto un montón clases. Una gran biblioteca que te acelerará como un cohete la creación de cualquier diseño que se te pase por la cabeza. Cuando lo domines se dará el caso de hacer una página sin haber escrito ni una línea de CSS.

Ventajas:

• Solo clases de CSS, el HTML a tu gusto.
• Transparente. Puedes incorporarlo a un sitio que ya tenga otro Framework CSS sin alterar ni un pixel del diseño original.
• Puedes filtrar por los estilos que necesite tu web.
• Sin un tema molesto que de un aspecto al sitio, no hay necesidad de sobrescribir nada. Al estar todo en variables CSS, puedes usar nativamente @apply para mejorar los tuyos.

Inconvenientes:

• Duro para iniciados.
• Si no controlas el peso, con PurgeCSS o desactivando módulos, llegará a ser pesado (298,8kb).
• La documentación tiene zonas sin terminar.
• Esta construido en Javascript, lo que conlleva que sea más complejo para la comunidad realizar aportaciones al repositorio.

Enlace: https://tailwindcss.com

Bulma

Version 0.9.3

Cuando se presentó al público web, su popularidad alcanzó rápidamente los primeros puestos de Hacker News (el foro más popular entre desarrolladores). Y no solo en una ocasión, sino en dos. Adelantó al titánico Bootstrap jugando en su propio terreno utilizando Flex en su núcleo. Modernizó el sistema de maquetación para usar el potencial de los nuevos estándares. Por otro lado nos regaló un diseño precioso y cuidado en cada pixel.

Ventajas

• Diseño exquisito.
• Detrás hay un gran diseñador Web como Jeremy Thomas.
• Fácil de personalizar.
• Sin Javascript, aunque varios ejemplos por si quieres complementar.
• Guía para migrar desde Bootstrap.
• El código esta en un SASS preciosamente bien ordenado.

Contras

• La Documentación no es cómoda. Necesita un buscador urgentemente.
• El contenedor no siempre se comporta como esperas.
• No dispone herramientas para dar espacios como paddings o margins.
• Comparado con Bootstrap o Semantic UI, podría tener muchos más componentes y opciones.
• No resetea correctamente algunos estilos.

Enlace: https://bulma.io/

pico.css

V1.3.3

Framework CSS más minimalista de la lista. Juega con un cambio automático entre un tema claro y oscuro dependiendo de la configuración del sistema operativo. Además consigue reducir la complejidad con clases claras que resuelven los problemas más comunes de un desarrollo web. Su curva de aprendizaje es prácticamente nula, con un vistazo rápido a la documentación ya podrás empezar a trabajar. Sin duda un heredero directo de otros micro frameworks que fueron abandonados en el 2020 como: pure.css, chota, lit o el famoso Spectre.

Ventajas:

• Rápido de aprender.
• Solo 52 Kb.
• Componentes esenciales: acordeones, tarjetas, navegadores, barras de progreso…
• Tema oscuro y claro.

Inconvenientes:

• Sin animaciones.
• Muy básico al maquetar.
• Puede quedarse pequeño para proyecto grandes.

Enlace: https://picocss.com

Foundation

V6.7.2

El ancestral enemigo de Bootstrap. Se ha visto siempre como la alternativa seria para empresas. Cabe destacar que nación en el 2011 con la intención de mejorar lo que había en el mercado. Y para ello usaron SASS como base, exprimiendo todo su potencial (con mixins) y siendo pioneros en la incorporación. A pesar de estar mantenido por una empresa (Zurb), su código posee licencia Opensource. Por otro lado es un proyecto con 3 ramas. No solo puedes hacer sitios Web, sino también Emails y Apps (con Angular). Siendo en su conjunto una navaja suiza del Diseño Web.

Ventajas:

• 3 en 1: Webs, Emails y Apps.
• Herramienta para personalizar los componentes y así controlar el peso final de CSS.
• Una documentación maravillosa: su buscador es inteligente, muchos ejemplos incluyen un vídeo tutorial a parte de su demo, viene con una gran cantidad de ejemplos en forma de código, enlace para modificar cualquier demo en codepen, boton para ayudar en los textos o pedir ayuda por Slack…
• Varias plantillas para maquetar con una base estructurada.
• Sección en su web con snippets (trocitos de código de ejemplo) realizado por la comunidad.

Inconvenientes:

• 7 archivos diferentes para vincular.
• Gran dependencia de Javascript.
• Puede resultar complejo para un Diseñador Web con poca experiencia.
• Para Apps hay otras herramientas más completas.

Enlace: https://foundation.zurb.com/

Minicss

V3.0.1

Se podría considerar un microframework o un punto de partida. Se centra en dar las herramientas mínimas de maquinación y nivelar las pequeñas imperfecciones del HTML. Para algunos será simple, pero si valoramos su ridículo peso con todo lo que nos proporciona podrás comprobar que es una inversión muy buena. Por encima de su esqueleto te deja colocar lo que necesites. Será tan potente como buen Diseñador Web seas.

Ventajas:

• Peso insignificante (46kb).
• Documentación clara y búsqueda sencilla.
• Sistema de grid (columnas) clónico de Bootstrap. No es necesario aprender nada si ya lo conoces.
• Se aplica la gran mayoría de los estilos a las etiquetas. Olvídate de añadir nuevas clases.
• 3 temas incluidos (Original, Dark y Nord).
• No necesitas Javascript para nada.

Inconvenientes:

• Es tan minimalista que se quedará corto cuando el proyecto crezca. Todo lo básico viene incluido, pero el resto tendrás que fabricarlo.
• Las listas podrían estar más elaboradas.
• No cumple el formato típico para los menús de headers (nav>ul>li>a).

Enlace: https://minicss.org

Tu framework CSS

v0.0.0

No he podido evitar una opción que nadie recomienda pero creo que es esencial para cualquier Diseñador Web. Estamos acostumbrados a que nos den el trabajo ya empaquetado en forma de estilos y una documentación perfectamente redactada. No es una perdida de tiempo desarrollar nuestras propias herramientas. Lo más seguro es que exista decenas de librerías iguales, con menos problemas y mucho más eficientes. Todos los Frameworks que he nombrado nacieron por dos razones: necesidad o ganas de aprender. Y todos los desarrolladores lucharon contra los mismos sentimientos que te vas a enfrentar: inseguridad, apatía, frustración, pereza… Forma parte del aprendizaje, de ser curioso. En el peor de los casos te servirá para entender la estructura de los grandes, y en el mejor serás independiente. Y, ¿quién sabe?, puede serle de ayuda a otras personas.

Ventajas:

• Aumentará tu vocabulario CSS.
• Mejorarás tus habilidades al maquetar con Flex y Grid.
• Entenderás como funcionan otros Frameworks CSS.
• Podrás ir incluyendo componentes por demanda.
• Aprenderás a tener una estructura clara.

Inconvenientes:

• No estará tan testeado como te gustaría.
• Vas a reinventar la rueda.
• Tendrás que hacer un esfuerzo extra a la hora de documentar. Sería recomendable una web con ejemplos para que otros te comprendan.

Enlace: Depende de ti.

Interés a lo largo del tiempo

Conclusiones

¿Cual debo utilizar? Depende. Mis sugerencias.

• Si es un sitio pequeño: Bulma, MiniCSS o pico.css.
• Si es un sitio mediano o grande: Bootstrap o Foundation.
• Si hay que trabajar rápido: Tailwind o pico.css.
• Si vas a trabajar con otras personas: Bootstrap o Foundation.
• Si debe tener un aspecto sencillo: pico.css.
• Si debe tener un aspecto muy personalizado: Tailwind o tu framework.