CSS Frameworks o CSS Grid: ¿Qué debo usar para mi proyecto?

Publicado: 2022-03-10
Resumen rápido ↬ ¿Alguna vez ha considerado si CSS Grid realmente puede reemplazar la necesidad de marcos CSS o bibliotecas de componentes de terceros? Al hacerlo, Rachel Andrew descubrió una variedad de razones por las que las personas usan un marco de trabajo de terceros y las cosas positivas y negativas de hacerlo.

Entre las preguntas que me hacen con más frecuencia se encuentra una variedad de la pregunta: "¿Debo usar CSS Grid o Bootstrap?" En este artículo, voy a echar un vistazo a esa pregunta. Descubrirá que las razones para usar marcos son variadas y no se centran simplemente en el uso del sistema de cuadrícula contenido en ese marco. Espero que al analizar estos motivos pueda ayudarlo a tomar su propia decisión, en términos de lo que es mejor para los sitios y aplicaciones en los que está trabajando, y también para el equipo con el que trabaja.

En este artículo, cuando hablo de un marco , estoy describiendo un marco CSS de terceros, como Bootstrap o Foundation. Podría argumentar que en realidad son bibliotecas de componentes, pero muchas personas (incluidos sus propios documentos) las describirían como un marco, así que eso es lo que usaremos aquí. El factor importante es que se trata de algo desarrollado externamente a usted, sin referencia a sus problemas específicos. La alternativa al uso de un marco de terceros es escribir su propio CSS, lo que podría implicar desarrollar su propio marco interno, usar un montón de archivos comunes como punto de partida o crear cada proyecto como algo nuevo. Todas estas cosas se hacen en referencia a sus propias necesidades específicas en lugar de las muy genéricas.

¿Por qué elegir un marco CSS?

La cuestión de si usar Grid o un marco es defectuosa, ya que CSS Grid no es un reemplazo directo para las cosas que hace un marco CSS. Cualquier exploración del tema debe considerar qué parte de nuestro marco CSS Grid va a reemplazar. Quería comenzar por averiguar por qué la gente había elegido usar un marco CSS. Así que recurrí a Twitter y publiqué este tweet.

Hubo muchas respuestas. Como esperaba, hay muchas más razones para usar un marco que simplemente el sistema de cuadrícula que contiene.

¡Más después del salto! Continúe leyendo a continuación ↓

Un marco le brinda a su equipo documentación lista para usar

Si está trabajando en un proyecto con otros desarrolladores, cualquier sistema interno que cree también deberá incluir documentación para ayudar a los miembros de su equipo a usarlo de manera efectiva. La creación de documentación útil requiere mucho tiempo y es un trabajo calificado en sí mismo, y es algo que los grandes marcos hacen muy bien.

Captura de pantalla de la página de inicio de la documentación de Bootstrap
La documentación de Bootstrap. (Vista previa grande)

La documentación del marco apareció una y otra vez, con muchos desarrolladores front-end experimentados contribuyendo y explicando por qué recomendarían y usarían un marco CSS. A veces escucho la opinión de que las personas usan frameworks porque realmente no saben CSS, sin embargo, muchas de las personas que responden son conocidas como desarrolladores expertos de CSS. Estoy seguro de que a veces se sienten frustrados por las elecciones hechas por el marco, sin embargo, los aspectos positivos de esa elección superan eso.

Comunidades en línea: fácil acceso a la ayuda

Cuando decide usar una herramienta en particular, también gana una comunidad de usuarios para pedir ayuda. A menos que tenga un problema de CSS muy claro y pueda producir un caso de uso reducido para demostrarlo, pedir ayuda con CSS puede ser difícil. Es especialmente así si desea preguntar cómo abordar la construcción de un determinado componente. El uso de un marco puede brindarle un punto de partida para su pregunta; en general, se preguntará cómo modificar o diseñar un componente en particular en lugar de comenzar desde cero. Esto es algo más fácil de preguntar, así como más fácil de responder.

El sistema de cuadrícula

A pesar de que tenemos CSS Grid, muchas personas respondieron que la razón principal por la que decidieron usar un marco fue por el sistema de cuadrícula. Por supuesto, muchos de estos proyectos pueden haberse iniciado mucho antes de que CSS Grid estuviera disponible. Incluso hoy, sin embargo, las preocupaciones sobre la compatibilidad con versiones anteriores o la comprensión del equipo de los métodos de diseño más nuevos pueden hacer que las personas decidan usar un marco en lugar de adoptar CSS nativo.

Velocidad de entrega del proyecto

Optar por un marco, en general, hará que sea mucho más rápido entregar su proyecto, en particular si ese proyecto encaja muy bien con la forma en que el marco hace las cosas y no necesita mucha personalización.

En el caso de desarrollar un MVP para una nueva idea, un marco puede ser una excelente opción. Tendrá muchas cosas en las que dedicar tiempo y seguirá probando suposiciones en términos de lo que necesita el proyecto. Ser capaz de desarrollar esa primera versión utilizando un marco puede ayudarlo a presentar el producto a los usuarios más rápidamente y ahorrar mucho tiempo desarrollando cosas que luego decide no usar.

Otro lugar donde la velocidad y un montón de componentes listos para usar pueden ser muy útiles es cuando se desarrolla el sistema de administración de back-end para un sitio o aplicación. En el caso de que simplemente necesite crear algunas pantallas de administración, ¡un marco puede ahorrar mucho tiempo para diseñar campos de formulario y otros componentes! Incluso hay temas de tablero para Bootstrap y Foundation que pueden brindar un punto de partida útil.

Captura de pantalla de un kit de tablero para Foundation
Las colecciones de componentes del tablero agilizan la creación del administrador de una aplicación. (Vista previa grande)

¡No soy un diseñador!

Este punto es la razón por la que opté por un marco CSS en el pasado. No soy diseñador, y si tengo que diseñar y construir algo, pasaré mucho tiempo tratando de tomar decisiones de diseño para las que no estoy en absoluto calificado. Sería maravilloso tener los fondos para contratar a un diseñador para cada proyecto paralelo, sin embargo, no los tengo, por lo que un marco podría significar la diferencia entre enviar la cosa o no.

Lidiar con errores de CSS y problemas de compatibilidad del navegador

Se mencionó menos de lo que pensé que podría ser el hecho de que los autores del marco ya se habrían ocupado de los problemas del navegador, ya sea debido a errores reales o falta de soporte para ciertas funciones. Sin embargo, esto seguía siendo un factor en la toma de decisiones para muchas personas.

Para ayudar con el diseño receptivo

Esto surgió un par de veces; la gente estaba optando por un marco específicamente por el hecho de que respondía, o porque yo tomaba decisiones sobre los puntos de interrupción por ellos. Pensé que era interesante que esto específicamente fuera algo mencionado como un factor al elegir usar un marco.

¿Por qué no usar un marco?

Entre las razones positivas por las que se seleccionaron los marcos se encuentran algunos de los problemas que las personas han tenido con esa elección.

Dificultad de anular el código del marco

Mucha gente comentó sobre el hecho de que podría ser difícil anular el código utilizado en el marco, y que los marcos eran una buena opción si no necesitaban muchas anulaciones. Los beneficios de la facilidad de uso y que todos en el equipo entiendan cómo usar el marco se pueden perder si hay una gran cantidad de personalizaciones en su lugar.

Todos los sitios web terminan teniendo el mismo aspecto

La culpa de que todos los sitios web empiecen a tener el mismo aspecto se ha puesto directamente en la puerta de los conocidos marcos CSS. He visto sitios en los que estoy seguro de que se ha utilizado un determinado marco, y luego descubro que son CSS personalizados, por lo que prevalecen las elecciones de diseño realizadas en estos marcos.

La dificultad de anular los estilos de marco ya mencionados es una gran parte de por qué los sitios desarrollados con un marco en particular tenderán a verse similares. Esto no es solo un problema creativo, puede ser muy extraño que un usuario de algunos sitios web que han optado por el mismo marco sienta que todos son lo mismo. En términos de transmitir su marca y hacer que la buena experiencia del usuario sea parte de eso, quizás pierda algo al optar por las opciones genéricas de un marco.

Heredar los problemas de CSS del mundo entero

Ya sea front-end o back-end, cualquier herramienta o marco que busque llegar a la corriente principal tiene que resolver tantos problemas como sea posible. A menos que la herramienta esté estrechamente relacionada con la resolución de un caso de uso particular, contendrá una gran cantidad de código muy genérico y código que resuelve problemas que no tiene y que nunca tendrá.

Es posible que se encuentre en la posición afortunada de solo necesitar ver su experiencia completa en los navegadores más actuales, lo que permite una experiencia más limitada en Internet Explorer o en versiones anteriores de Chrome. El uso de un marco con mucho soporte integrado que se remonta a IE9 daría como resultado una gran cantidad de código adicional, especialmente dadas las mejoras en el diseño de CSS recientemente. También podría impedirle ser creativo, ya que todo en el marco asume este requisito de soporte. Las cosas que son posibles usando CSS bien pueden estar limitadas por el marco.

Como ejemplo, los sistemas de cuadrícula en marcos populares no tienen la capacidad de expandir filas, ya que no hay ningún concepto o filas en los sistemas de diseño anteriores al Diseño de cuadrícula. CSS Grid Layout lo permite fácilmente. Si está vinculado a Bootstrap Grid y su diseñador presenta un diseño que incluye elementos que abarcan filas, no puede implementarlo, a pesar de que Grid podría ser compatible con sus navegadores de destino.

Problemas de desempeño

Relacionado con lo anterior, hay problemas de rendimiento inherentes al uso de código bastante genérico, en lugar de algo optimizado para los casos de uso exactos que tiene. Cuando intente mejorar el rendimiento, se encontrará chocando con las decisiones del marco.

Aumento de la deuda técnica

Si bien un marco puede ser una excelente manera de hacer que su inicio despegue rápidamente, y al momento de tomar esa decisión, está seguro de que lo reemplazará, ¿existe un plan para que eso suceda?

Aprender un marco en lugar de aprender CSS

Al hablar con los asistentes a conferencias y talleres, descubrí que muchas personas solo han usado un marco para escribir CSS. No hay nada de malo en ingresar al desarrollo web a través de una de estas herramientas, dada la complejidad de la plataforma web actual, imagino que será el camino para muchas personas. Sin embargo, puede convertirse en una opción que limite tu carrera, especialmente si el marco en el que basaste tus habilidades pierde popularidad.

Tener desarrolladores front-end sin conocimientos de CSS debería preocupar a una empresa. Hace que sea increíblemente difícil alejarse de ese marco si su equipo en realidad no entiende cómo hacer CSS sin él. Si bien esto no es realmente una razón para no usar un marco, es algo a tener en cuenta al usar uno. Cuando llegue el día de mudarse, esperaría que el equipo esté listo para asumir algo nuevo, sin necesidad de recordar (o aprender por primera vez) cómo escribir CSS.

La elección no tiene en cuenta a los usuarios finales

Nicole Sullivan hizo prácticamente la misma pregunta unos días antes de mi pregunta cuando estaba pensando en escribir este artículo, aunque estaba considerando los marcos de front-end como un todo en lugar de solo los marcos de CSS. Jeremy Keith señaló que precisamente ninguna de las respuestas se refería a los usuarios finales. Este fue también el caso con las respuestas a mi pregunta.

En nuestra carrera por construir nuestro sitio rápidamente, nuestro deseo de hacer las cosas lo mejor posible para nosotros como diseñadores y desarrolladores del sitio, ¿olvidamos para quién estamos haciendo esto? ¿Las decisiones tomadas por el desarrollador del marco coinciden con las necesidades de los usuarios del sitio que está construyendo?

¿Podemos reemplazar los marcos con CSS "vainilla"?

Si está considerando reemplazar su marco o comenzar un nuevo proyecto sin uno, ¿cuáles son algunas de las cosas que podría considerar para facilitar ese proceso?

Comprenda qué partes del marco necesita

Si está reemplazando el uso de un marco con su propio CSS, un buen lugar para comenzar sería auditar su uso del marco actual. Calcule lo que está usando y por qué. Considere cómo reemplazará esas cosas en el nuevo diseño.

Podría seguir un proceso similar al pensar en seleccionar un marco o escribir el suyo propio. ¿Qué partes de esto podría razonablemente esperar necesitar? ¿Qué tan bien se ajusta a sus requisitos? ¿Habrá una gran cantidad de código que importará, potencialmente pedirá a los visitantes que lo descarguen, pero nunca lo usarán?

Cree una biblioteca de patrones documentada o una guía de estilo

Soy un gran fanático de trabajar con bibliotecas de patrones y puedes leer mi publicación aquí en Smashing Magazine sobre nuestro uso de Fractal. Una biblioteca de patrones o una guía de estilo permite la creación de documentación junto con todos sus componentes. Comienzo todos mis proyectos trabajando en el CSS en la biblioteca de patrones.

Aún necesitará escribir la documentación, como alguien que escribe documentación, sin embargo, sé que a menudo lo más difícil es saber por dónde empezar y cómo estructurar los documentos. Una biblioteca de patrones ayuda con esto al mantener los documentos junto con el CSS para el componente en sí. Este enfoque también puede ayudar a evitar que los documentos se vuelvan obsoletos, ya que están estrechamente vinculados al componente al que se refieren.

Pautas para desarrollar su propio código CSS

La consistencia en todo el equipo es increíblemente útil, y sin un marco, puede que no haya nada que dicte eso. Con los métodos de diseño más nuevos, en particular, a menudo hay varias formas en las que se puede construir un patrón, si todos eligen uno diferente, es probable que surjan inconsistencias.

Mejores lugares para pedir ayuda

Aparte de enviar personas en dirección a Stack Overflow, parece que hay muy pocos lugares para pedir ayuda sobre CSS. En particular, parece haber pocos lugares que sean accesibles para los principiantes. Si queremos alentar a las personas a que se alejen de las herramientas de terceros, entonces debemos satisfacer esa necesidad de apoyo amable y útil que proviene de las comunidades alrededor de esas herramientas.

Dentro de una empresa, es posible que los desarrolladores más experimentados se conviertan en el apoyo de CSS para los miembros más nuevos del equipo. Si pasa de un marco a su propia solución, sería prudente considerar qué capacitación podría ser necesaria para ayudar a cerrar la brecha, especialmente si las personas están acostumbradas a usar la ayuda proporcionada en torno a la herramienta de terceros cuando necesitaron ayuda en el pasado. .

Guías de estilo o puntos de partida para no diseñadores

Me hago nudos con preguntas como: "¿Qué fuentes debo usar?", "¿Qué tan grandes deben ser los encabezados en relación con el cuerpo del texto?", "¿Está bien usar una sombra paralela?" Puedo escribir fácilmente el CSS, ¡si sé lo que estoy tratando de hacer! Lo que realmente necesito son algunas reglas para hacer un diseño no terrible, algún tipo de punto de partida tipográfico o un conjunto de pautas básicas que reemplacen el uso de los valores predeterminados de un marco en muchos casos.

Educar a las personas sobre el estado de la interoperabilidad de los navegadores modernos

Descubrí que las personas que han estado inmersas en el desarrollo basado en marcos durante varios años, a menudo tienen una visión de la interoperabilidad de los navegadores que está desfasada varios años. Nunca hemos estado en una mejor situación en términos de que CSS funcione entre navegadores. Puede ser que algunos navegadores no sean compatibles con un nuevo bit brillante de CSS, pero en general, CSS (cuando es compatible) no estará lleno de errores extraños. Por ejemplo, en casi todos los casos, si usa CSS Grid en un navegador, su CSS funcionará exactamente de la misma manera en otro.

Si intenta presentar un caso para no usar un marco a los miembros del equipo que creen que el marco los salva de los errores del navegador, este punto puede ser útil para plantear. ¿Los problemas de compatibilidad del navegador son reales o se basan en preocupaciones del pasado?

¿Veremos una nueva generación de marcos?

Algo que me interesa es si nuestros nuevos métodos de diseño ayudarán a marcar el comienzo de una nueva generación de herramientas y marcos. ¿Veremos herramientas que aprovechen los nuevos métodos de diseño, permitan una mayor creatividad pero aún brinden a los equipos e individuos algunas de las ventajas innegables que surgieron de las respuestas a mi tweet?

Quizás al confiar en nuevos métodos de diseño, en lugar de un sistema de cuadrícula incorporado, un marco de nuevo estilo podría ser mucho más ligero, convirtiéndose en una colección de componentes útiles. Entonces podría escapar de algunos de los problemas de rendimiento inherentes al código muy genérico.

Un área en la que un marco podría ayudar sería ayudar a crear respaldos sólidos para los navegadores que no son compatibles con los métodos de diseño más nuevos, o al tener una accesibilidad realmente sólida integrada en los componentes. Esto podría ayudar a brindar orientación sobre una forma de trabajar que considere la interoperabilidad y la accesibilidad, incluso para aquellas personas que no tienen estas cosas en mente.

No creo que simplemente cambiar Bootstrap Grid por CSS Grid Layout logre esto. En cambio, los autores que presenten nuevos marcos, tal vez deberían analizar algunas de las razones descritas aquí e intentar resolverlas de nuevas formas, utilizando la nueva funcionalidad que tenemos en CSS para hacerlo.

¿ Debería usar un marco?

Usted y su equipo deberán responder esa pregunta por sí mismos. Y, a pesar de lo que la gente intente hacerte creer, no existe una respuesta universal correcta o incorrecta. Solo existe lo que es correcto o incorrecto para su proyecto. Espero que este artículo y las muchas respuestas a mi pregunta original puedan darle algunas cosas para discutir mientras reflexiona sobre esa pregunta.

Recuerde que la respuesta cambiará con el tiempo. Podría ser un experimento mental útil no solo considerar lo que necesita en este momento, en términos de hacer inicialmente el desarrollo del sitio, sino también considerar la vida útil del sitio. ¿Esperas que esto siga existiendo dentro de cinco años? Entonces, ¿su elección será positiva o negativa?

Documente sus decisiones, no tenga miedo de revisarlas y asegúrese de que usted y su equipo mantengan sus habilidades fuera de cualquier marco que decida utilizar. De esa manera, estará en un buen lugar para avanzar en el futuro y tomar las mejores decisiones para las siguientes fases de su proyecto.

Me encantaría que la conversación iniciada en ese tuit continuara. Háganos saber sus historias en los comentarios; es posible que ayuden a otras personas que intentan descubrir qué es lo mejor para sus proyectos en este momento.