Puede que no necesites un framework CSS

21 julio, 2016 3:55 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks. Traducción por Jordi Cuevas.

Los frameworks CSS no son nada nuevos  y son muy populares en la escena del desarrollo front-end. Estos frameworks proporcionan fragmentos de código que puedes copiar y pegar en tu sitio web para elaborar el diseño entero y la  interfaz de usuario.

Probablemente ya has leído muchos artículos sobre cómo pueden ser buenos para tus proyectos, pero aquí me gustaría hacer lo contrario: destacar algunos de los inconvenientes que le pueden traer a tus sitios web o aplicaciones, y cómo puedes evitarlos o mitigarlos.

The pyre of wisdom

Cuando le pregunto a las personas por qué están utilizando un framework en particular, su respuesta generalmente encaja en una o más de estas categorías:

  • Velocidad: la mayoría piensa que hará que el desarrollo sea más rápido. Y esto puede ser cierto en las etapas iniciales de un proyecto. Pero esta ganancia puede estar seguida de una deuda técnica – vamos a ver cómo se produce la deuda – que tendrá que ser pagada luego, con interés.
  • Mejores prácticas: algunas personas piensan que usar un framework css es una buena práctica, especialmente aquellos iniciando el desarrollo front-end. Esto es reforzado por la avalancha de artículos, la inclusión de estos frameworks en los programas de aprendizaje y en las descripciones de ofertas laborales.
  • Diseño: muchos desarrolladores sólo quieren realizar y terminar un proyecto y no tienen un diseñador disponible. Los frameworks CSS proveen un diseño básico que los desarrolladores pueden usar. Son de mucha ayuda, pero la consecuencia es que tu sitio o app terminará pareciéndose a cualquier otro sitio reciente en internet – pero si esto impacta tu proyecto ya es decisión tuya.

Deuda técnica

Independientemente de las razones para usar un framework, éstos podrían introducir una deuda técnica a tu proyecto. A veces puede tener sentido tener esta deuda técnica, por ejemplo si deseas lanzar algo tan pronto como sea posible o si estás desarrollando un prototipo cuyo código será descartado después.

Sin embargo, para grandes proyectos como una página web o el desarrollo de una aplicación, esta deuda técnica puede convertirse en inmanejable y dificultar el desarrollo. Vamos a ver por qué esto sucede.

Código HTML no semántico

Esto no es un problema de los frameworks, aunque he visto que ocurre mucho inclusive en los más populares.

Por ejemplo, tal vez estás leyendo la documentación para aplicar estilos a botones: puedes encontrar un fragmento de código que te dice que debes utilizar una clase para deshabilitar los botones en vez de añadir el atributo disabled a la etiqueta <button>.

Existen un sinnúmero de ejemplos con <div> o <span> dónde una etiqueta más semántica sería más apropiada. Y ni hablemos acerca de un <div> dentro de un <div>, dentro de un <div>

Selectores CSS muy específicos

De nuevo, esto no es un problema inherente a los frameworks, pero sí es algo que podemos observar en los más populares: hay una tendencia a usar selectores muy específicos para crear las reglas CSS. Por ejemplo:

.table-responsive > .table-bordered > thead > tr > th:first-child

¿Qué sucede si necesitas reemplazar algunas de las propiedades de tu <th>? ¡Entonces necesitarías crear un selector aún más específico! Simplemente no puedes resolverlo con sólo crear una regla como ésta:

th.important-heading { color: #000; }

En su lugar debes crear una regla como ésta:

.table-responsive > .table-bordered > thead > tr > th:first-child.important-heading {
  color: #000;
}

Lo que ocurre es que nadie quiere escribir este tipo de código. Pronto vemos con mayor frecuencia este tipo de reglas:

th.important-heading { color: #000; !important }

… ¡lo que sólo empeora el problema!

Reglas que no necesitas

Si incluyes un framework completo en vez de un sólo la porción de código que necesitas, tendrás reglas CSS que no estarás usando.

Por supuesto esto se puede mitigar con la ayuda de una herramienta que procesa el código finalizado y remueve las reglas que no se usaron. Pero cuando comienzas a añadir o eliminar clases de manera dinámica con JavaScript, no estarás 100% seguro que no necesitarás ese código.

El CSS que no se usa sólo hace que tus archivos sean más grandes, lo que puede ser un problema para los dispositivos móviles que se conectan a través de una red celular en vez de usar WIFI, a su vez hacen más largo tu código y por consiguiente más difícil de mantener.

Ser el dueño de tus opiniones y decisiones

Todos los frameworks son dogmáticos. Esto no es un inconveniente si no tienes una opinión fuerte o si la tuya es la misma que la del framework.

Pero algunas veces sí tienes opiniones fuertes. Por ejemplo, aquí está el código HTML que propone un framework para crear etiquetas de texto de color:

Out of stock

Encuentro estas clases redundantes, ya que sólo uso las clases que considero necesarias. Si ese fuera mi código, probablemente tendría solo la clase label-warning.

¿Y qué pasaría si eres fanático de una metodología CSS específica (como “bloque, elemento, modificador”) que tu framework no usa?

Alternativas a los frameworks

Escribe tu propio HTML y CSS. Si no te gusta el código que un framework produce, deberías escribir tu propio código. Si las reglas CSS que un framework provee hacen que tu trabajo sea ineficiente, entonces deberías crear tus propias reglas.

Si necesitas una cuadrícula, puedes usar Flexbox, lo cual hace que la elaboración del diseño sea menos dolorosa que utilizar divs flotantes. Si no estás familiarizado con Flexbox, puedes darle un vistazo a esta guía MDN. Si tienes curiosidad de cómo puede verse dicho código, aquí hay una implementación del diseño Holy Grail que hice usando Flexbox.

¡En el futuro tendremos Grid! Esto permitirá crear diseños en un abrir y cerrar de ojos, y no sentirás la necesidad de usar un framework de cuadrícula nunca más. Aquí hay otra implementación del diseño Holy Grail, esta vez usando Grid.

(Nota: Para ver el resultado ejecutándose en tu navegador, usa la versión de Nightly de Firefox o la última de Firefox Developer Edition – simplemente funciona. Para ver estos ejemplos en otra versión de Firefox, necesitas cambiar la bandera. Ve a about:config en el navegador para habilitar la funcionalidad de layout.css.grid.enabled.)

Si sólo necesitas un widget UI , cómo un menú desplegable personalizado, y no lo quieres programar desde cero, simplemente puedes incluirlo en vez de todo el framework – o simplemente usar un componente de terceros que no posea dependencias externas.

Si necesitas un diseño para reutilizar, una manera razonable de usar estos frameworks sería tomar las fuentes Sass o Less en vez de los archivos CSS  ya generados. Haciendo esto, puedes tomar los mixins y crear tus propios selectores, lo que te permitirá tener tu propio código. ¡Pero ten presente que tu sitio lucirá exactamente igual a muchos de hoy en día!

Si necesitas una manera de estandarizar la creación de UI en tu proyecto, para que las personas sepan que código utilizar y cómo añadir nuevos elementos a la interfaz, lo que buscas es una guía de estilo (en pocas palabras, tu propio framework). ¡Debes tener una para tus proyectos grandes!

Resumiendo

Los frameworks CSS pueden tener ventajas, pero también presentan desventajas que a menudo son pasadas por alto. Debes estar consciente de ellas y también conocer las herramientas y APIs que tienes a tu disposición para crear el CSS y código de tus sitios y aplicaciones.

The following two tabs change content below.

jorgev

Add-ons Developer Relations Lead at Mozilla
Jorge trabaja para el equipo de complementos de Mozilla, y se dedica a Mozilla Hispano y Mozilla Costa Rica en su tiempo libre. Actualmente está encargado del blog de Mozilla Hispano Labs.

Compartir artículo:

Join the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa