Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Errores de CSS que deberías evitar: Uso de IDs

Errores de CSS que deberías evitar: Uso de IDs 30.OCT.13

Alvaro José Rios Ch
Fundador WebBizarro

Hay errores que se suelen cometer al escribir CSS, bien sea porque hacen el trabajo más fácil o porque simplemente no conocemos otra forma de hacerlo, sea como sea debemos evitarlo y es que el problema con el CSS malo es que genera más CSS malo.

Para ayudar a mejorar les estaré haciendo una serie de artículos donde podremos ver cuales son los errores más comunes al escribir CSS.

Usar Ids.

El primer problema se refiere a los ID como selectores para los CSS, si bien facilita el trabajo puede ser molesto en el momento de hacer mantenimiento y que es un selector muy específico.

Por ejemplo si tenemos el siguiente código el selector que el browser tomará en cuenta será el primero ya que los ID deben ser únicos en la página.

#my-link { color: red; }
.my-link { color: green; }
a { color: blue; }

El problema con esto es que rara vez conseguiremos cosas como las que le mostré en el ejemplo sino que encontramos algo como esto.

#header a { border: 2px dashed #000; }

Si esto esta en un proyecto y después queremos cambiar alguno de los links inmediatamente escribiríamos otro CSS para tratar de deshacer el estilo (otro mal hábito).

.special-link { border: none; }

Que tal si ponemos esto al colocar .special-link ya debería solucionarse todo ¿no es así?, pues no los selectores de ID son tan específicos que para que esto funcione tendrías que hacer algo como esto.

#header .special-link { border: none; }

Ahora imagina que este mismo escenario se repite varias veces en tu proyecto y tendrás un dolor de cabeza. Es por eso que usar ID en el CSS es tan problemático porque una vez están hay el problema se vuelve eterno, lo mejor es cambiar los selectores de ID por clases que son más practicas para usar.

Puedes ver la segunda parte aquí.