martes, 20 de noviembre de 2012

2 Cosas que no me gustan de Twitter Bootstrap

Vaya por delante que me parece que los chicos de Twitter han hecho, en líneas generales, un gran trabajo. Sobre todo me gusta su carrusel responsive, aunque no sea la opción más completa sí que es más que digna.
Sin embargo, no sé si es que no esperaban su propio éxito o si era desde el principio lo que pretendían, pero  están consiguiendo marcar un estándar de diseño, con sus cosas buenas (alguien que no tenga ni idea de diseño puede hacer una página resultona de manera bastante fácil) y sus cosas malas (si bien no se resta margen a la creatividad, han marcado una pauta de la que pocos se atreven a salirse, si no me crees, fíjate en los botones de las aplicaciones web, cuesta encontrar unos distintos a los de Bootstrap).
Por otro lado, otra cosa que tampoco impone Bootstrap es la utilización de marcado presentacional. ¿O sí? O, al menos, ¿hasta qué punto? No lo impone, pero lo promueve. Hoy por hoy, mediante los preprocesadores (Sass y Less, por ejemplo) es completamente prescindible (en realidad siempre lo ha sido) al poder reutilizar partes con marcado semántico. Pero es que, a pesar de la "amistad" que une a Bootstrap y Less, en su propia página utilizan classes como los que siguen para la barra superior:
  • navbar-inverse: Para que el color de fondo sea oscuro
  • navbar-fixed-top: Para fijarlos a la parte superior de la página y que no se mueva de ahí aunque se haga scroll
Nein, nein, nein. ¿Qué cojones hacemos a estas alturas del partido mezclando responsabilidades? HTML para contenidos, CSS para presentación y Javascript para comportamiento. ¿Es que no hemos aprendido nada? ¿A nadie le suena ya eso de hacer un HTML lo más semántico posible? ¿Damos la batalla por perdida? 
Y no me vale que me vengan ahora con que CSS3 y sus transition y animations se inmiscuyen en el comportamiento, y por muchos motivos, entre ellos:
  • Es importante partir de una materia prima buena y ésta la compone el HTML
  • Las animaciones realizables mediante CSS3 son sólo las más sencillas (¡¡¡no tenemos callbacks, por ejemplo!!!)
  • Pero sobre todo: el acoplamiento entre CSS y Js es de por sí alto y esto no es algo fácilmente soslayable, porque las animaciones no son otra cosa que presentación dinámica de un elemento, por definición. Por el contrario, es posible (y deseable) dejar el HTML limpio de elementos presentacionales, al menos en la mayor parte de casos.
¿Quiero decir con esto que  Bootstrap es una mierda? ¡No! Pero hay que utilizarlo con cuidado: por ejemplo, en Sass sería suficiente con utilizar @extend para reutilizar el código y no incurrir en todos los problemas que conlleva lo anteriormente explicado. Less tiene su propia sintaxis, pero la idea es la misma: no utilizar marcado presentacional. Al menos cuando no sea imprescindible.
O si no, acabaremos con botones rojos que tendrán un class "azul", barras superiores con su class "fixed-bottom", etc. Pero estamos en 2012, eso ya es agua pasada... ¿o no?