Jugando piedra, papel o tijera con CSS

por Natalia Ventre el 24/06/2013 ・ podés leerlo en 2 minutos ・

Dos conceptos fundamentales para entender cómo funcionan las hojas de estilo en cascada son herencia y orden.

Herencia

Herencia significa que un elemento que desciende de otro, “hereda” sus propiedades. Por ej. si en el body definís que la fuente es Arial, un párrafo, que es hijo del body, cobra la herencia, y recibe Arial.

Las propiedades que se heredan de manera predeterminada son:

table.padre{
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: 0;
}
table table{
  /* hereda los estilos de table.padre */
}
div{
  caption-side: left;
  color: black;
  cursor: pointer;
  direction: ltr;
  font-family: serif;
  font-stretch: narrower;
  font-size: 16px;
  font-size-adjust: none;
  font-style: italic;
  font-variant: normal;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.5;
  quotes: none;
  text-align: center;
  text-indent: 2em;
  text-transform: uppercase;
  white-space: pre;
  word-spacing: 5px;
}
div p{
  /* hereda los estilos de div */
}
ul.padre{
  list-style: none;
  list-style-image: url (bullet.png);
  list-style-type: disc;
}
ul.padre ul{
  /* hereda los estilos de ul.padre */
}

Orden

El orden se refiere a que el código se lee de arriba a abajo y el último gana. Es decir, si en una hoja de estilo externa definís que el color de los h1 es gris y luego en el HTML agregás un estilo inline estableciendo que el color es rojo, el título quedará rojo.

Resumiendo, el orden predeterminado es:

  1. Predeterminado del navegador (ejemplo links azules y subrayados)
  2. Hoja de estilo CSS externa
  3. Estilo inline

Piedra, papel o tijera

La batalla se pone interesante, porque además de un orden predeterminado, los selectores tienen prioridades. Por ej.: si definís que el tamaño de fuente de los párrafos es 14px y para #destacado es 18px, el tamaño de fuente de un p#destacado será 18px.

  1. clase1 le gana a elemento2
  2. ID le gana a clase
  3. !important le gana a ID

Cuando se juega con todos los selectores, la especificidad se calcula de acuerdo a la tabla de especificidad de la W3C. El cálculo es complejo y se puede resolver con la Specificity Calculator.

La herencia y la especificidad es la causa de que el “CSS no te funcione”, ya sea porque el elemento está heredando un estilo indeseable o porque un estilo te está sobreescribiendo otro. Usando las herramientas para desarrolladores de Chrome podés ver para cada elemento qué estilos realmente se están aplicando y cuáles se están sobreescribiendo (tachados).

Conclusiones

A partir de las definiciones de herencia y especificidad surgen dos conclusiones:

  • Como las #IDs son muy específicas y no hay con qué ganarles (excepto el comodín !important) conviene definir los estilos usando clases.
  • Evitar usar !important para resolver batallas de especificidad. Harry Roberts en shame.css desarrolla la idea de usar !important como un recurso rápido para resolver problemas de especificidad, pero aclarando que son soluciones temporales.

  1. Dentro de este grupo están las .clases, [atributos] y pseudo-clases (:hover, :focus, etc.).

  2. Este grupo incluye los elementos (p, div) y pseudo-elementos (:before, :after).