Learnt in Translation

A translator's repository

Bootstrap no es necesario

I. Carrico (2013)

No sorprenderé a nadie que me haya oído hablar si digo que no soy amigo de usar Bootstrap. Uno de los objetivos que persigo con los talleres que Four Kitchens organiza mediante distintos eventos de Drupal para Responsive Web Design y para otras empresas es darles a los desarrolladores las herramientas que necesitan para no tener que usar Bootstrap o similares. Pretendo aclarar por qué creo que Bootstrap no es lo adecuado para la mayoría de sitios web y qué es lo que se puede usar en vez de Bootstrap.

Antipatrones

En primer lugar, Bootstrap contiene demasiados antipatrones. Un antipatrón es una idea de diseño que parece buena y se implementa a menudo pero generalmente es una idea mala para un sitio web. Para empezar, Bootstrap no nos da un diseño adaptativo de verdad. Basándose en la idea de que hacemos sitios web para teléfonos, tabletas y escritorios, Bootstrap gira en torno al concepto de que debe haber cuatro puntos de ruptura. Esto es contrario a la idea de diseñar y hacer sitios que partan del contenido y procurando que el sitio sea usable sin importar el dispositivo en el que se vaya a visualizar. Un buen ejemplo de cómo los dispositivos no se amoldan a estas categorías concretas es el Samsung Galaxy Mega, que puede ser tanto un smartphone grande como una tablet pequeña. El diseño debería funcionar en un dispositivo como este aunque no sea específicamente una tablet o un smartphone.

Este problema afecta generalmente también a los diseños en grid que están basados en clases: nos autolimitamos. Los grid deberían funcionar con el contenido mismo y no imponer una estructura de clases. No deberíamos limitarnos a diseños de doce columnas y cuatro puntos de ruptura. Todo lo contrario, debemos diseñar nuestros sitios en torno al contenido creando diseños maravillosos que tengan en cuenta los dispositivos móviles desde el principio. En pocas palabras: tendríamos que merecer algo mejor.

Aplica tu propio diseño

Los sitios que usan Bootstrap tienen todos la misma apariencia y aplican un mismo código al frontend. Incluso los temas emplean un montón de estilos innecesarios. Sin embargo, en tu sitio, deberías poder funcionar con TU diseño basado en el CSS más exiguo posible. ¿Por qué sobreescribir código si puedes utilizar el tuyo propio desde el principio?

Mejor estructura de etiquetas

No me gusta nada ensuciar mi estructura de etiquetas con demasiadas clases o con clases que no son semánticas. Cuando escribo el código, quiero que mi sitio sea limpio, fácil de leer y con las menores interferencias posibles. Aparte de que prefiero tener un código legible, también hay razones de orden práctico para rechazar el diseño basado en clases. Muchos gestores de contenido, Drupal entre ellos, tienen enfoques y maneras propias de presentar la estructura de etiquetas y las clases, resultando muy difícil insertar las clases de Bootstrap por todo el código. Naturalmente, se puede hacer y claro que hay formas de hacerlo, pero será más costoso en tiempo y energía que si creamos nuestro propio código CSS desde el principio.

Con Sass es posible

Este es el momento en el curso de mi argumentación en el que me dicen: «Sí pero necesito hacer prototipos rápidos y no tengo tiempo para crearme CSS individuales desde el primer día». Eso era cierto antes de que la comunidad de Sass empezase a crear extensiones a Compass, permitiendo así crear prototipos con código específico al cien por cien. No solo se puede hacer esto con código específico sino que, desde el primer día, escribimos prototipos con el código totalmente listo para salir a producción. Team Sass ha trabajado mucho para hacer que los grid personalizados, las media queries y la edición de estilos sean algo sumamente fácil. Está en tus manos y con estas herramientas es posible.

¿Para qué sí sirve Bootstrap?

Yo recomiendo encarecidamente no usar Bootstrap y nunca defendería que se use en un sitio que está en producción. Dicho esto, no está nada mal, ha sido creado por un equipo de ingenieros y diseñadores magníficos y aporta algunas ideas notables. Para empezar, es una buena forma de aprender y observar el uso de ciertos estilos y código javascript que son interesantes. Si somos nuevos en el mundo del frontend o queremos ver cómo funciona el diseño adaptativo desde lo más básico, echémosle un vistazo al código. Es una buena manera de ver cómo funcionan internamente algunos de estos ejemplos de frontend. Además, si estamos escribiendo una página de administración en backend que solo se usa internamente, Bootstrap es una herramienta magnífica que nos proporciona partes interesantes de la interfaz de usuario sin tener que dedicarle todo un diseño. Si dicho código no requiere tener grandes prestaciones y no importa si toma prestado de otros elementos de interfaz, se puede usar Bootstrap.

Resumiendo

No usemos Bootstrap. En serio. Somos mejores que eso, sabemos diseñar mejor y sabemos generar el código de una manera mejor. Usar un preprocesador CSS como Sass nos permitirá seguir teniendo el prototipado rápido que nos haga falta y las herramientas comunes de Sass serán nuestro pan de cada día.

Translation info
Translator: Alexis Condori
Published: December 18, 2016 at 22:31 GMT
Last modified:
Canonical url: https://alexiscondori.com/translation/0001-bootstrap-no-es-necesario
Source: hptr:s/oobrdoed-fnudkutyhenc.toa/mrcisle/coi-root.nrew-uoft/tpat