Marco de interfaz

Hay 3 tipos de marcos CSS

Antes de sumergirnos, debe comprender los 3 tipos diferentes de marcos CSS. Es importante tomar la decisión correcta.

1) Preprocesadores y transformadores CSS

Este es un tipo de marco de interfaz de tiempo de compilación, no generan CSS de forma predeterminada.

Agregan características que no existen y se utilizan para escribir CSS más rápido.

Los famosos son: SASS, Less, Stylus y PostCSS.

Cada uno tiene otro marco de interfaz o complementos basados ​​en ellos. Por ejemplo, Susy está escrito en SASS para crear diseños de cuadrícula más rápido.

A menudo los verá incluidos en marcos frontend o plantillas.

No son marcos de interfaz de usuario de CSS.

2) Kit de interfaz de usuario y marcos CSS basados ​​en componentes

Este es un marco de interfaz para CSS más utilizado.

Vienen con una interfaz de usuario prediseñada y obstinada. Esta es la forma más rápida que conozco de crear interfaces con CSS.

Pero también tienen sus contras. La estructura HTML está mayoritariamente predefinida y el diseño no siempre es fácil de personalizar.

En pocas palabras: son muy testarudos.

Los más usados: Bootstrap, Foundation, Skeleton, Materialise, Milligram y Bulma.

3) Marco de interfaz CSS Atomic / Utility-first

Atomic CSS y Utility-first CSS son conceptos muy similares, incluso diría lo mismo, y se hicieron muy populares en los últimos 3 o 4 años.

Las 2 razones principales son: Reaccionar con componentes con estilo y Tailwind CSS.

En pocas palabras: ambos conceptos consisten en escribir clases o propiedades CSS directamente en el HTML.

Por lo tanto, es muy flexible, puede crear la estructura HTML que desee, pero es mucho más lento crear una interfaz de usuario con ella que con los marcos CSS basados ​​en componentes.

Bien, entonces, ¿cuál es el mejor marco CSS?

Para mí, el mejor marco depende de 3 cosas: diseño, tiempo, equipo.

• Si el diseño es común / no hay diseño: Bulma o Bootstrap
• Si el diseño es complejo y hay tiempo: Tailwind CSS
• Si el diseño es complejo y no hay tiempo: Bulma + mucho CSS personalizado
• Si necesita crear un sistema de diseño: Tailwind CSS

Dependiendo del tamaño y las habilidades de mi equipo, no elegiría la misma herramienta y, en muy raras ocasiones, haría CSS desde cero.

Como puede ver: no existe un marco perfecto en todas las situaciones.

Para la mayoría de escenarios como aplicaciones web, paneles de administración y páginas de destino comunes, un marco de interfaz basado en componentes como Bulma es perfecto.

Para páginas de destino específicas o páginas / aplicaciones web muy centradas en el diseño, un marco de utilidad primero como Tailwind es perfecto.

Bien, ¿por qué Bulma sobre Bootstrap y los demás?

• Fundation es antigua y el diseño predeterminado es más difícil de personalizar
• La parte JS de Bootstrap 4 se basa en jQuery, pero la v5 parece prometedora
• Skeleton y el Miligram son demasiado básicos para la mayoría de los proyectos
• Materialise es demasiado obstinado y un poco desactualizado en mi opinión

Bulma PROS:

• Tiene muchos componentes para la mayoría de los casos.
• Está limpio por defecto y es bastante fácil de personalizar con SASS
• Tiene su propio conjunto de clases de utilidad, así que lo mejor de ambos mundos
• Solo carga lo que necesita y es fácil de ampliar
• El documento es claro y fácil de leer (importante)

Bulma CONTRAS:

• No todo es personalizable, en algunos escenarios es necesario realizar anulaciones de CSS

¿Por qué Tailwind sobre cosas como Styled-components, por ejemplo?

Tailwind CSS tiene un gran documento y siempre está mejorando.

Agregaron gradientes CSS, cuadrículas nativas y transformaciones a clases de servicios públicos que al principio parecían imposibles debido a la cantidad de combinaciones posibles.

Tailwind CSS también tiene muchas plantillas prediseñadas basadas en él, como la interfaz de usuario oficial de Tailwind, entre otras.

Los marcos CSS-in-JS o Atomic CSS, como Styled-components y ACSS.io, no se parecen en nada a CSS. Sin embargo, el rendimiento es un poco mejor porque crea la hoja de estilo sobre la marcha en función de lo que escribe.

Pero prefiero la separación de preocupaciones sobre un desempeño ligeramente mejor.

Otros frameworks de utilidad primero que he probado, como Tachyons, tampoco somos lo suficientemente naturales. Tailwind parecía el más natural y amigable para los desarrolladores.

Desventajas de Tailwind:

• La compilación puede ser lenta cuando su proyecto crece, pero el nuevo compilador JIT aparentemente lo arreglará.
• No se adapta en absoluto si crea aplicaciones que tienen que generar CSS personalizado como Canva o creadores de plantillas granulares como Webflow.

Conclusión

Bulma es para mí el mejor marco CSS basado en componentes, pero no lo usaría para diseños específicos o para crear mi propio kit de interfaz de usuario o sistema de diseño.

Tailwind es para mí el mejor marco CSS atómico / utilitario primero si necesita crear su propio kit de interfaz de usuario, sistema de diseño o páginas específicas de diseño.

En ambos casos, aún necesita escribir un poco de CSS para proyectos medianos a grandes. No hay una fórmula mágica.

Bootstrap v5, que se encuentra actualmente en versión beta, parece muy prometedor con su propio conjunto de iconos SVG,

Espero que esto te aclare un poco el mundo de las CSS.