Universal AJAX Live Search

Kit de Emergencia para conflictos con CSS

Conforme tu sitio web crece, tu CSS se va haciendo más complejo, y los poderosos selectores actúan en todo su esplendor, pero también es en ese momento, cuando puedes encontrar todo tipo de bizarros e inexplicables problemas:  De dónde salió ese margen?, porque ese texto tiene el color equivocado?...Este Kit de emergencia contiene los tips básicos para eliminar esos conflictos  y no morir en el intento!

El contenido de este Kit de emergencia  es simple, pero poderoso, y te ayudará a resolver cualquier conflicto que tus estilos estén teniendo en un abrir y cerrar de ojos, además de que se fomentan las buenas prácticas y es muy fácil de tener a la mano mientras escribes tu CSS:

 

ESPECIFICIDAD

La Real Academia Española define la especificidad como la cualidad y condición de ser específico, o lo que es lo mismo: concreto, determinado. En los últimos años, los expertos en CSS se han apropiado de este término para denominar la cualidad que hace que un estilo predomine sobre otro cuando ambos deberían afectar a un mismo elemento.

Un ejemplo claro es el siguiente, donde ambas reglas se refieren a un elemento <h2> asignandole un color, pero la segunda regla es la que predominará:

h2 {
    color: #555;
}
#feature {
    color: #666;
}

Porque? Este tipo de preguntas las responde la Especificidad...

El principio en el que se basa es simple: El selector más específico gana. Seguramente te preguntarás como se sabe que tan específico es un selector? Bueno, afortunadamente este KIT incluye una descripción gráfica que te ayudará a calcularlo.

Ahora todo tiene más sentido, en nuestro ejemplo anterior, el selector #feature tiene un valor de 100, sobreescribiendo por completo al selector h2 que tiene un valor de tan sólo 1, y como éste puede haber muchos ejemplos más, ya que el valor de los selectores, también se suma, de modo que un selector como este:

h2 .intro_text {
    color: #555;
}

Tiene un valor total de 11 (10 por la clase .intro_text y 1 por el elemento h2) y también sería capaz de sobreescribir a la primera regla que utilizamos como ejemplo.

Aqui algunos aspectos importantes para el buen entendimiento de la especificidad:

  • La Especificidad es usada por los navegadores para determinar que regla debe aplicarse automáticamente.
  • La especificidad es usualmente la causa de que los estilos no se apliquen a los elementos a pesar de que todo indica que deberían.
  • Si dos o más selectores se refieren al mismo elemento, el más específico sobreescribe a los demás.
  • Si dos o más selectores tienen el mismo valor de especificidad, el que este enlistado al último gana.
  • Los estilos "en línea" y la declaración !important sobreescriben todo aquello que tengan a su paso.
  • Es recomendable usar IDs para reducir el margen de conflicto entre reglas.
  • El selector universal (*) tiene un valor de 0 en especificidad.
  • La especificidad es muy fácil de calcular, ahorra problemas conforme tu sitio crece y es parte fundamental del buen uso de CSS :)

 

JERARQUÍA y HERENCIA

Como su propio nombre lo indica, las Hojas de Estilo en Cascada (Cascade Style Sheets) funcionan bajo un principio jerárquico basado en el orden de aparición de los selectores y reglas que las conforman. Esto significa que si dos o más selectores apuntan a un mismo elemento, él último que aparezca sobreescribirá a los anteriores, porque ese es el orden en que el navegador los va aplicando.

De igual manera a la forma en que un selector hereda estilos a los elementos que se encuentran dentro de otros, puede causar conflictos, para explicar mejor esto, veamos un ejemplo:

HTML

<div class="titulo">
   <h2>Este Es un Título</H2>
   <p>Bloque de texto</p>
</div>

 CSS

.titulo {
color:#555;
font-size:1em;
}

p {
color: #435;
}

En este caso, la primera regla causa que el elemento <p> herede el color al estar dentro del elemento con la clase .titulo, pero por orden de aparición la segunda regla ganaría. Esto es especialmente útil cuándo tratamos de aplicar estilos a un elemento y no notamos que por herencia, ya tiene estilos aplicados, asi que debe resolverse haciendo uso de la jerarquía o la especificidad.

 

HERRAMIENTAS DE DEPURACIÓN

Este kit no podría estar completo si no mencionaramos a un gran aliado: El DOM Inspector (conocido como DOMi) que es una herramienta de Mozilla utilizada para inspeccionar, navegar y editar en vivo el Modelo de Objetos del Documento(Document Object Model en inglés) de los documentos web.

Acceder a él es muy fácil, teniendo abierta nuestra página web en Firefox, basta con hacer click derecho y seleccionar Inspeccionar Elemento, esto abrirá una ventana en la parte inferior, que es la intrefaz del DOMi

Una vez abierto el DOMi, podrás ver dos paneles que básicamente muestran la estructura de tu documento (izquierda) y según vayas seleccionando elementos dentro de tu página, en el panel de la derecha aparecerán todas las reglas CSS que están aplicándose a ese elemento, con sus respectivos selectores, adicionalmente muestra en que línea de la hoja de estilos se ubican las reglas y tiene la capacidad de activar o desactivar reglas ahi mismo para ver el efecto que tendría en el documento

Aqui se aprecia la correspondencia entre el elemento HTML y los estilos que tiene aplicados en el panel del DOMi:

Nótese la excelente herramienta de depuración que puede ser este pequeño panel,aqui tenemos este ejemplo de cómo se ve de manera gráfica cuándo una regla esta siendo sobreescrita:

Ambas reglas se refieren al elemento con el ID #feature, lo que significa que tienen el mismo valor de especificidad, pero la que se ve tachada es sobreescrita por el orden de aparición que tiene, ya que esta en la línea 67 de la hoja de estilos, y la que predomina se encuentra en la línea 156 , aqui se demuestra como en base a los principios que vimos anteriormente, lo fácil que podemos identificar y corregir errores que causan dolores de cabeza hasta al más relajado.

Espero te sea de utilidad este Kit de consejos para que todo fluya en orden en tus Estilos :) Nos vemos en el siguiente artículo!

 

Zae Vega. Diseñadora Web, Amante del Café, la Usabilidad y Front-End.

Dudas o comentario? Encuéntrame en twitter como @ZaeVega