Story
Bootstrap
Software

¿Por qué dejé de usar Bootstrap?

Jeroen Ooms | 26 de febrero de 2020

Bootstrap es un framework frontend de código abierto, desarrollado por varios empleados de Twitter. Aunque se trata de una gran iniciativa, dejé de usarlo hace un tiempo, y hoy en día no lo recomiendo a clientes o compañeros. Aquí os dejo cinco razones por las que desaconsejo Bootstrap:

1. Más de lo necesario

Con Bootstrap, en teoría, deberías ser capaz de construir todo tu sitio web con los diferentes componentes que ofrece.

Sin embargo, es bastante raro que un desarrollador use todos los componentes disponibles de este frame. Lo que significa que habrá muchas líneas de código innecesarias en los archivos CSS y Javascript de Bootstrap. Y, por consiguiente, estos KB innecesarios reducirán el rendimiento.

En cualquier caso, Bootstrap ha desarrollado una solución para esto. Podremos personalizar nuestro frame y activar o desactivar componentes en el sitio web de Bootstrap; y luego descargar el paquete que se adapte mejor a nuestras necesidades.

Problema resuelto entonces, ¿Verdad? No del todo. Cuando estemos en un proyecto a largo plazo y trabajemos con SCRUM, por ejemplo, regularmente habrá cambios en las necesidades del cliente o en los diseños. Antes de seguir leyendo, deberemos saber qué significa SCRUM Master. Para añadir nuevas opciones, tendremos que ir a la web de Bootstrap y descargarnos los nuevos componentes que necesitemos. Un proceso algo tedioso y que nos hará perder tiempo. Vaya, no es algo que quieras hacer todas las semanas. La versión SASS de Bootstrap nos dará más libertad pero no resolverá el problema para javascript, y además hará que la estructura de tu proyecto sea más compleja. Otra solución sería, simplemente, sobrescribir el estilo estándar de Bootstrap con su propio CSS personalizado. Pero esto tampoco es lo más óptimo.

2. Sobrescribe, sobrescribe y... sobrescribe.

Si trabajas para clientes, casi siempre hay que crear un diseño antes de que los desarrolladores se pongan a trabajar (en el mejor de los casos, tu también habrás estado involucrado como desarrollador). Este es otro problema con Bootstrap. Aparte de una serie de aspectos que se pueden personalizar, Bootstrap tiene un estilo predeterminado (que se ve cada vez más en algunos sitios web). Pero la posibilidad de que los diseñadores hayan tenido en cuenta un frame como Bootstrap es prácticamente nula.

Para cambiar los estilos predeterminados, tendrás que copiar los nombres de clase de Bootstrap en tu propio CSS y luego sobrescribir los estilos de Bootstrap predeterminados (o ajustar el diseño para que funcione con Bootstrap). Una labor que no gustará mucho a los diseñadores.

Esta fue la razón principal para que dejase de usar Bootstrap. Cuando adquirí más experiencia con CSS y Javascript, noté que me llevaba menos tiempo crear mi propio encabezado o botón, que usar un componente de Bootstrap y luego adaptarlo al diseño.

[css].navbar-default .navbar-nav > li.active > a:focus {
background: none;
color: black;
}[/css]

(Este es un ejemplo de sobreescritura de estilos con Bootstrap. Como se observa, no es muy eficiente, la verdad.)

3. Patrones de diseño y semántica.

Bootstrap hace que sea casi imposible usar un patrón CSS como BEM o SMACSS, porque los componentes de Bootstrap están vinculados al HTML con nombres de clase. Con esto también vinculas el estilo al marcado. Además del estilo, también vincula el comportamiento (javascript) de su sitio web a su HTML (nombres de clase y atributos de datos).

Los patrones CSS mencionados anteriormente intentan promover la desvinculación del marcado, el estilo y el comportamiento tanto como sea posible. Esto se debe a que en una etapa posterior (después de la entrega y la puesta en marcha), si el marcado debe modificarse lo menos posible, se ahorrará mucho tiempo en mantenimiento. Porque en muchos casos se han convertido en plantillas para un CMS (JSP, ASPX, PHP, etc.).

Los cambios de diseño en una etapa tardía, por lo tanto, también afectarán al backend. Además, la semántica es complicada en Bootstrap, ya que requiere que completes el marcado con demasiados nombres de clase, solo para usar un determinado componente Bootstrap. Para algunos componentes, a veces se necesitarán 3 ó 4 nombres de clase.

4. ¿Qué pasa con el sistema de rejilla o grid?

Un argumento que, a menudo, me escucho a mi mismo es "Necesitamos un sistema de rejilla". Por supuesto, existe un grid en Bootstrap y es casi imposible construir un sitio web responsive sin ello. Sin embargo, existen alternativas mucho mejores que lo que ofrece Bootstrap. Mi favorito es actualmente Susy, porque permite construir un grid con SASS, sin que esto esté vinculado a nombres de clase específicos (por ejemplo, col- lg-2).

[css]
.product {
@include span(2 of 10);

@include breakpoint(980px) {
// 4 in a row
@include span(2.5 of 10)
}
@include breakpoint(980px) {
// 3 in a row
@include span(3.33 of 10)
}
@include breakpoint(600px) {
// 2 in a row
@include span(5 of 10)
}
@include breakpoint(380px) {
// 1 in a row
@include span(10 of 10)
}
}
[/css]

(Ejemplo de un grid con bloques de productos, construida con Susy y SCSS).

Otra razón importante para no usar un grip como el de Bootstrap, es que yo mismo noto, en la práctica, que necesito más y más puntos de interrupción para una web. Y que estos puntos de interrupción pueden diferir por página. Un conjunto preestablecido de cinco puntos de interrupción, por ejemplo, no siempre satisface mis necesidades al crear sitios web responsive.

5. Ahora vamos con Javascript

Todos los puntos anteriores estaban relacionados, sobre todo, con HTML y CSS. Pero, como comentamos al principio, el Javascript de Bootstrap también tiene una serie de aspectos negativos. En primer lugar, el javascript es un archivo grande, del que solo podré eliminar componentes a través del sitio web Bootstrap. El uso de AMD o Browserify, por ejemplo, no es posible para Bootstrap javascript.

[javascript]
var progressElement = document.querySelector(‘#progress-bar’);
if (progressElement) {
var Progressbar = require(‘./components/Progressbar’);
new Progressbar(progressElement);
}
[/javascript]

(Ejemplo de cómo cargo componentes con browserify. Los componentes solo se cargan cuando están presentes en una página para ahorrar memoria.)

Otra desventaja aún mayor es el uso obligatorio de jQuery para la mayoría de los componentes de Bootstrap. jQuery es un frame que también dejé de utilizar recientemente (pero esta es una historia diferente. Por lo tanto, usar el JavaScript Bootstrap nos reduce en flexibilidad y casi siempre resultará en KB innecesarios.

Entonces, ¿Bootstrap es bueno para algo?

Sí, desde luego. Bootstrap es una gran herramienta, a pesar de todo, pues hay una serie de escenarios en los que Bootstrap puede ser de gran ayuda. Como cuando tienes que construir un prototipo extremadamente rápido (por ejemplo, en un día). O si vas a crear una aplicación donde la interfaz no tiene importancia (Por ejemplo, una aplicación para uso interno).

Para lo que Bootstrap creo que podría ser muy útil, es para los desarrolladores frontend primerizos. Cuando empecé con HTML y CSS, Bootstrap fue una especie de trampolín para mí, que me dio la sensación de que podía construir mucho más que antes. Posteriormente, investigué cómo Bootstrap hace eso en segundo plano.

Bootstrap es, por lo tanto, un frame muy útil, pero solo para situaciones muy específicas. En la práctica, creo que es algo que se ha puesto de moda, sin pensar realmente si ahorrará dinero a "largo plazo".

Opciones para compartir

Jeroen Ooms

Senior front-end developer

Póngase en contacto con Jeroen.

siguiente story

Plataformas de e-commerce. Las 10 mejores, ventajas y desventajas.

Ignacio Ordorica | 19 de febrero de 2020