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: Deshacer

Errores de CSS que deberías evitar: Deshacer 21.NOV.13

Alvaro José Rios Ch
Fundador WebBizarro

Si no has visto los artículos anteriores puedes revisarlos aquí.

Cuando estamos haciendo CSS es muy común deshacer estilos parahacer un reset y eso está muy bien porque ayuda mucho a que funcione en diferentes navegadores, lo que no esta bien es que lo hagamos a lo largo del CSS se deshagan estilos que nosotros hemos aplicado, si tenemos que remover un CSS es porque probablemente lo aplicamos en el lugar equivocado.

Les presento un ejemplo, pensemos que queremos tener un estilo para un encabezado que les parece colocarlo con algún borde y hacemos algo así.

h3{
    font-size: 2em;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #000;
}

Excelente ya con ese tendremos un borde en el encabezado y algo de espacio entre ellos, pero que tal si algunos de los encabezados h3 en el sitio no llevan bordes, que hacemos en ese caso bueno podemos deshacer el estilo entonces.

.sin-bordes{
    padding-bottom: 0;
    border-bottom: none;
}

Pero esto no es lo más adecuado, cuando hacemos algo como esto denota falta de planificación en lo que estamos haciendo ya que como les dije anteriormente aplicamos el estilo en el lugar inadecuado y pudimos hacer lo siguiente, dejando los estilos comunes en uno de los selectores y el resto por separado.

h3{
    font-size: 2em;
    margin-bottom: 0.5em;
}

.bordes{
    padding-bottom: 0.5em;
    border-bottom: 1px solid #000;
}

Todo funciona como debe y no tenemos que sobrescribir ningún CSS, a medida que avances en los CSS debes ir agregando estilos no eliminándolos, si en algún punto comienzas a deshacer los estilos es un síntoma de que colocaste algo demasiado pronto.