4 minutos de lectura

¿Realmente necesitas utilizar un framework CSS?

¿Te ha pasado que estás por iniciar un nuevo proyecto y no sabes si utilizar algún framework CSS?

Para la industria se ha convertido un standard el uso de estas herramientas que han sido de gran utilidad, pero lo que te quiero plantear es lo siguiente: ¿Es realmente necesario utilizar un framework CSS en el 2020?

Con la ayuda de Chrome puedes verificar cualquier página, solo tienes que abrir la consola con los comandos cmd + option + i y a continuación cmd + shift + p y escribe “Coverage”.

¿Es realmente necesario utilizar un framework CSS?

Al hacer un análisis del mismo bootstrap en su página oficial verás que el 94.5% del css no se está utilizando.

Ya con esto como punto de partida, toca analizar las ventajas y desventajas de utilizar un framework CSS.

Ventajas y desventajas

Estas son las principales ventajas:

  • Acelera el desarrollo, ya que al conocer las utilidades que nos ofrece, se puede desarrollar de manera más rápida que si lo hacemos desde cero.
  • Facilita el trabajo en equipo, si hemos desarrollado un proyecto con un framework y posteriormente otra persona necesita realizar modificaciones y conoce el framework fácilmente seguirá la línea de estilos.
  • Garantiza que será compatible con la mayoría de los navegadores.
  • Al ser mantenido por una comunidad, los posibles errores son corregidos y se van agregando nuevas funciones.

También hay un serie de desventajas que hay que tener en cuenta:

  • Un framework está utilizando muchos estilos y funciones que no se están empleando todas en tu proyecto. El uso de esta gran cantidad de elementos hace que tu proyecto pese más y estos KB innecesarios reducirán el rendimiento.
  • Un framework CSS tiene una curva de aprendizaje.
  • Para modificar los estilos predeterminados, tendrás que copiar las clases y sobrescribir los estilos, una labor que podría llegar a ser muy tediosa.
  • Por la manera en que los componentes están vinculados al HTML, es casi imposible utilizar un patrón CSS como BEM o BEMIT.

Proyectos grandes vs Proyectos pequeños

La clave es evaluar tu proyecto. Si no tiene muchos elementos UI y mantienes pocas vistas en tu aplicación, no es necesario utilizar un framework CSS.

¿Qué sucede con los proyectos pequeños?

Si el proyecto es pequeño, mantenlo pequeño y no utilices ningún framework. Hacer un layout con puro CSS es hasta más fácil que utilizar la tediosa combinación de clases de estos frameworks, para eso te sugiero hacer uso de flexbox y grid. Así que te aconsejo que te tomes un tiempo para aprender sobre ello, puedes aprender de estos frameworks consultando su documentación.

¿Pero qué pasa con los proyectos grandes?

Para iniciar un nuevo proyecto esta decisión es fácil. Si estás trabajando en equipo, ponte de acuerdo con ellos y evalúen su mejor opción. Si ya tienes un proyecto avanzado y no consideraste esta parte, existen técnicas y herramientas que ayudarán a que tu proyecto sea más eficiente.

  1. Remover el código innecesario con la ayuda de herramientas

    Gracias a la comunidad de javascript, tenemos herramientas increíbles para optimizar el CSS de tu proyecto. Una de esas herramientas es PurgeCSS, esta se encarga de depurar todo el css de tu proyecto que no se utiliza, lo único que debes hacer es configurarlo y está disponible con webpack, grunt, gulp, etc.

  2. Minimizar

    Otra manera de disminuir el tamaño del CSS es minificandolo. Para esto hay maneras distintas de hacerlo, igual puedes utilizar un administrador de tareas como webpack o ya existen algunas herramienta online.

  3. Documenta

    Si ya decidiste dejar los frameworks, te sugiero documentar y utilizar metodologías como BEM y BEMIT, creeme te ayudara bastante al momento de reutilizar código y evitar una larga lista de errores generada por otros desarrolladores. Al principio puede sonar intimidante, pero te beneficiará a largo plazo.

Conclusión

Si decides utilizar frameworks o no, eso queda a tu discreción. La clave está en utilizar de la manera más adecuada cualquiera de ellos, siguiendo las mejores prácticas y comprobando nuevas propiedades para reemplazar las antiguas.