Siendo específico

9/ene/2008 11

Este tema debe ser uno de los artículos griales de CSSLab, y podría aportar en la solución de más de algún problema con el maqueteado CSS. La especificidad es una técnica que debe ser entendida muy a fondo, para que pueda ser abordada sin problemas posteriores, donde lo más común es cuando se escriben estilos para un mismo elemento y el browser no lo despliega como lo estipulamos. En esos momentos, lo más probable (aparte del error de que pueda estar mal escrito) es que haya conflictos de especificidad. Y mientras más grandes los archivos CSS (grandes me refiero a más de 1000 líneas), más difícil es controlar estos conflictos.

Son varias las reglas que implican la especificidad. Comencemos.

1.

Si los selectores son iguales, entonces el último escrito (el de más abajo en el código, ya que el browser lee los archivos de arriba hacia abajo) es el que toma importancia:


p { font-size: 1em; }
p { font-size: 1.5em; }

Entonces <p> tendrá el tamaño de texto de 1.5em. Esto es cuando los selectores son declarados de la misma forma, como en el ejemplo anterior. Vamos con otro:

2.

Para: <ul><li><a href="">Link</a></li></ul>


ul li a { color: #f00 }
a { color: #333 }

Si siguiéramos la misma filosofía, el link de una lista tendría color gris oscuro porque fue declarado después. Pero como hemos sido más específico diciendo que el link en un elemento de una lista (ul li a) es rojo, éste gana predominancia y finalmente se muestra rojo, no gris porque hemos sido más específicos con ello. Básicamente, esta regla dice: mientras más específico el selector, más preferencia tendrá por sobre otros estilos. Existen cálculos creados para ayudar a evitar errores en esto:

Selectores HTML tienen valor 1

p tendrá especificidad 1

(p = 1)

ul li a tendrá especificidad 3

(ul+li+a = 1+1+1 =  3)

Selectores de Class tienen valor 10

.nombreclass tendrá especificidad 10

(.nombreclass = 10)

div p.nombreclass tendrá especificidad 12

(div+p+.nombreclass = 1+1+10)

Selectores de ID tienen valor 100

#nombreid tendrá especificidad 100

(#nombreid = 100)

body #nombreid .nombreclass p tendrá especificidad 112

body+#nombreid+.nombreclass+p = 1+100+10+1 = 112

3.

Selectores universales tienen especificidad 0, tales como * y body

4.

Estilos inline (esos que son dados dentro del mismo HTML mediante el atributo style="") tienen la mayor especificidad de todas.

<p style="color: blue;">Texto en azul</p>

Finalmente, un par de consejos:

  • Trata de evitar !important. De eso se trata todo esto, entender cómo funciona para que no tengas que parchar utilizando métodos que causan más problemas de los que soluciona.
  • – No te vuelvas loco especificando. Sería insano toparse con:
body div#container div#menu ul li ul.submenu li a
  • – Ahorra especificidad no yendo atrás más que 2 o 3 niveles para evitar conflictos, como por ejemplo:
#menu li a

Links:

Comentarios

  1. Sebastian [#]

    Buen consejo. No sabía lo de los valores para cada selector. Según entiendo el browser va “leyendo” valores de menor a mayor? Siempre es bueno algo nuevo de grámatica. Interesante artículo.
    Saludos.

  2. claudio [#]

    GRACIAAAAAAS!
    no saben lo mucho que me han solucionado la vida

  3. Eduardo [#]

    Guau. Ojo, que no es problema sólo de hojas de más de mil líneas… ¿Han intentado solucionar rápidamente un problema en uyn sitio ya hecho… en Dreamweaver?

    Sí, esos con clases “estilo1″.

    Gracias!

  4. Victor San Martin [#]

    wow, no tenia idea de los valores que representaba cada tipo de declaración!!! genial.

    Saludos

  5. luigix [#]

    Interesante artículo, sin duda.
    Yo tampoco sabía acerca del peso de cada selector.

    Gracias por la información.

  6. pollaki [#]

    muy buen articulo!! exelente..

  7. fearlex [#]

    Excelente articulo, lo del valor de los selectores, es por ponerles un valor, o de veras ese es el valor que tienen ? Es la primera vez que oigo eso, aunque guiandome por estos valores se me facilita la vida mucho mas. 😀

    Saludos

  8. Jorge Epuñan [#]

    Asi lo define W3C fearlex. Salu2.

  9. CSSLab - jQuery browserSizr [#]

    […] injects a specific class when it is in the range you’ve activated. Through CSS and a bit of specificity, you can define what happens when the browser is in each […]

  10. php tutorial [#]

    Already saw this article at your site. But in another language.

  11. Las 10 leyes de Jorge para el diseño y desarrollo web ↝ CSSLab [#]

    […] de abuso reiterativo innecesario en el codigo fuente. Estudia bien las herencias de estilos, la especificidad y cómo ordenar tu código […]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab