código css eficiente

en Desarrollo Web, Javascript, Programación

Código CSS Eficiente: Cuida el uso de IDs

Hola a todos, esta ocasión también voy a escribir este post un poco corto, pero intentaré que sea lo más explicativo posible al problema. Planeo que se convierta en una serie de varias entradas que serán englobadas bajo el tema “Código CSS Eficiente“.

código css eficiente

Esta primera entrada hablaré sobre los IDs en los elementos HTML, y una situación “curiosa” con la que me encontré hace poco, siendo esta la premisa a mi recomendación de evitar en lo posible utilizarlos.

Bueno, quiero abrir un paréntesis antes de comenzar con esto, ya que seguramente, para los devs que ya cuentan con cierta experiencia, les pueda estar causando conflicto mis palabras, les pido lean completo el post antes de satanizarme, recuerden que la mayoría de mis post van dirigidos a un público que va comenzando en este mundo.

Requisitos

  • Básico entendimiento de HTML
  • Básico entendimiento de CSS
  • Básico entendimiento de Javascript

Código CSS Eficiente: Evita usar IDs

Bien, lo sepas o no en CSS el selector más rápido es el ID ¿sorprendido? entonces tal vez te preguntes, por qué te digo que evites utilizarlos si son buenos para el rendimiento de los sitios web, mi respuesta a esta pregunta sería: porque siempre debemos mantener las cosas niveladas.

No podemos ir por la vida escribiendo código que tenga por objetivo lograr el mejor rendimiento, sacrificando otras cuestiones como, mantenibilidad, escalabilidad, por mencionar algunas.

Es probable que en las primeras lecturas que hayas tenido sobre CSS, hayas visto que un ID sólo debe ser usado una vez en cada documento que creemos. Y así tiene que ser, pero yo complementaría esto (basado en mi experiencia), con que los IDs funcionan mejor cuando tienen un próposito, además de diferenciarlo del resto de elementos de un grupo, etc. ¿Por qué?

Vamos a observar un poco de código, para que entendamos mejor la situación extraña que proporcionan los IDs:

Supongamos que tenemos el siguiente código HTML:


<!DOCTYPE html>
  <html>
    <head>
      <title>La Espora del Hongo</title>
    </head>
    <body>
      <div id="foo">
        ...
      </div>
    </body>
</html>

Y desde un script queremos modificar el el ancho de este elemento, podríamos tener algo como lo que sigue:


const bar = document.getElementById("foo")

foo.style.width = '300px'

¡Funciona!

Antes de alegrarte, vuelve a mirar el código, ¿lo ejecutaste? ¿notas algo extraño?

Para comenzar en nuestro script no tenemos ninguna variable llamada foo, mucho menos hacemos referencia a nuestro elemento HTML en ella, entonces porqué está ocurriendo esto.

No sé que tan conocido sea este detalle, ya que no es algo en lo que haya indagado mucho, pero al parecer, por cada uno de nuestros elementos HTML que cuenten con un ID, el navegador crea una variable global ¿ya sabes por dónde va el problema? con este comportamiento, ensuciamos el contexto de nuestra aplicación, ya que podríamos utilizar como ID, algún nombre y sobreescribir el valor de una variable, incluso una variable built-in.

Pero no termina ahí, si ya cuentas con algo de experiencia, podrías estar pensando: si utilizo nombres compuestos como “foo-bar” no debe existir problema. Falso, sigue existiendo, sólo que no tan obvio como en el caso anterior, ¿no confías en mí? adelante, suponiendo que el ID del elemento HTML es “foo-bar”:


window["foo-bar"]  // --> <div id="foo-bar">

Les repito, no sé que tan conocido sea este comportamiento, y posiblemente pienses que es algo irrelevante, pero no está de más el conocerlo, ya que en algún momento podrías toparte con una situación similar, en donde no tengas refencias en tu script de alguna variable que este afectando a tu código.

Y por favor, no utilices este comportamiento en tus proyectos.

No por favor, es realmente confuso, no quisiera toparme con un código en el cual, se encuentren variables “por arte de magia” y que únicamente están gastando memoria o que no hayan sido definidas previamente, mucho menos que se encuentren manipulando objetos del DOM sin una base de código “esperada”.  Y en el mejor de los casos, los navegadores decidieran que este comportamiento es una locura y lo retiraran.

Así que ahí lo tienen, esto es más para que vean Que no hacer con los IDs y el CSS.

Como recomendación te repito: utiliza IDs siempre que vayas a hacer referencias desde tu script (y definas tus variables) para manipular los elementos del DOM, o tengas una guía de estilo propia, donde la nomenclatura que utilices, sepas que no afectará en nada dentro del contexto de tu aplicación, evitando así ensuciar el contexto global (porque está es una muy mala práctica), además, es bueno seguir patrones de diseño para que logres obtener un código css eficiente, con lo cual puedes evitar este tipo de comportamientos.

Y bueno, por esta ocasión es todo, es más algo cultural que otra cosa pero bueno, espero te haya parecido interesante.

Espero la explicación haya sido clara y cualquier comentario no dudes en dejarlo aquí abajo, o con confianza mencionalo por Twitter o en la Fanpage de Facebook, y aprovecho a invitarte para que me sigas en las redes y compartas el contenido del blog, con lo cual me harías un gran favor.

Deja un comentario