El uso de frameworks de CSS cada vez se ha vuelto más común ya que nos permite agilizar considerablemente el desarrollo de un proyecto.
Un framework se conoce como el conjunto de herramientas que nos permite construir los estilos de una interfaz web mediante CSS. Existen una gran cantidad de frameworks para CSS con diferentes enfoques, en este caso hablaremos acerca de los frameworks orientados a utilidades y por otra parte aquellos basados en componentes.
Ya que tienes una visión general acerca de lo que son los frameworks de CSS imagínate lo siguiente: tienes un proyecto en mente, para el cual te dan muy poco tiempo de desarrollo y sabes que existen herramientas que puedes utilizar para terminar en un menor tiempo, pero te das cuenta que todos son sumamente similares y no puedes personalizarlos a tu manera.
Aquí es dónde entra el principio de “Utility First” u Orientado a utilidades. A diferencia de los frameworks que ya cuentan con una amplio catálogo de componentes predefinidos como lo es Material UI, un framework orientado a utilidades nos permite trabajar con clases primitivas que brindan una mayor personalización una de las mayores ventajas es que se escriben directamente sobre nuestro archivo HTML de esta manera es posible crear un código mantenible y limpio.
Por otra parte un framework basado en componentes cuenta con elementos predefinidos como alertas, botones, cards que cuentan con estilos propios. Teniendo como objetivo hacer uso de estos componentes para agilizar el desarrollo y sin la necesidad de crearlos desde cero. Puesto que su principal enfoque no es la personalización, en ocasiones los componentes se llegan a volver un tanto genéricos.
Como se mencionó anteriormente uno de los frameworks orientado a utilidades es Tailwind CSS siendo reconocido por su sencilla curva de aprendizaje y amplia personalización de estilos. A pesar de ser un framework relativamente nuevo al ser un framework open source está en constante desarrollo.
Una de las principales razones por las que definitivamente recomiendo utilizar este framework es porque puede ser utilizado como una API para nuestro propio Design System, además de que cuenta con una amplia paleta de colores incluso con variedad de tonalidades.
Otra de las principales ventajas de Tailwind es que está basado en el principio de mobile first lo cuál nos obliga a preguntarnos cuáles elementos son necesarios dentro de nuestra interfaz para así poder crear una mejor experiencia de usuario. Respecto al diseño responsivo es bastante amigable ya que cuenta con distintos breakpoints que van desde la medida de un dispositivo móvil hasta la de un monitor ultrawide.
Y finalmente uno de los puntos más importantes es que trabaja con Purge CSS lo que nos permite reducir el tamaño de nuestro archivo CSS eliminando todas aquellas clases que no son utilizadas, para de esta manera tener un mejor rendimiento en nuestra página web o aplicación.
Retomando el tema de los frameworks orientados a componentes Material UI (basado en el tema de Material) es probablemente el framework más popular, además de ser considerado un Design System por el gran catálogo de componentes que ofrece para nuestra interfaz a su vez nos ofrece consistencia dentro de nuestro diseño, sin embargo como gran diferencia tenemos la manera en la que se personalizan los estilos predeterminados ya que dentro de Material UI se hace uso de javascript para poder modificarlos, manejando como objeto nuestros estilos personalizados.
Pero no te preocupes no tienes que elegir entre utilizar uno u otro, ya que ambos funcionan de manera distinta cada uno cumpliendo su función. Es importante conocer los tipos de frameworks que existen para CSS e identificar su funcionamiento de esta manera te será más fácil evaluar cuál de ellos es el que te convendrá utilizar en tu próximo proyecto.
Si te gustán los frameworks CSS, te invito a tomar el Curso Básico de Tailwind donde vas a crear una landing page desde cero con las features que ofrece Tailwind. ¡Allá te veo!
No tenia ni idea que este curso iba a salir ya. Justamente tenia definido para esta semana aprender Tailwind porque lo estaba implementando con React pero al no conocerlo bien se me dificulta buscar cada cosita en la doc.
Me cae como anillo al dedo 😅
Lo empiezo hoy mismo más tardecito!
A decir verdad, después de haber hecho el curso de Tailwindcss quedé totalmente impresionada por las maravillas que se pueden lograr con este FrameWork … Estoy contando las horas para poder continuar con el aprendizaje … Nos leeremos o veremos en el curso …
Que gran articulo! desde hace un año vengo utilizando tailwind y ha sido de lo mejor que he podido implementar en mis proyectos, antes trabajaba con bootstrap pero la alta personalización que tiene tailwind me cautivo. Espero iniciar pronto con el curso básico de tailwind 💪🏽
Me encanta 😄
Interesante
Tuve un período de tiempo en mi vida en el que necesitaba ganar dinero. Empecé a buscar un pasatiempo que me ayudara en esto y llamé la atención sobre los deportes en línea visit Fscore. Esto realmente funciona con deportes profesionales reales. Pero no tienes que asistir a los partidos. Ves, analizas y usas todo sin moverte de tu casa.
Wow que bien Tailwind es un framework que me está empezando a gustar mucho ❤️, espero poder sacar el máximo provecho con este curso 😃
No sabía sobre el frameworks Tailwind, este post me dio una idea.
Lo estaba esperando hace días, comencé a seguir a la profe en todas partes, aparte de inteligente tiene un gran carisma y es súper hermosa!
Concuerdo contigo en el ultimo punto jeje