Si planea usar CSS regularmente, necesita desarrollar una comprensión de qué es la especificidad y cómo se aplica.
Además de las carrozas y las posiciones, la especificidad puede ser una de las cosas más difíciles de acostumbrar, y mucho menos dominar. Los selectores que usa en su CSS tienen diferentes pesos y están controlados por especificidad. Es por eso que a veces, cuando aplica una regla a un elemento, no se refleja en su diseño.
Si alguna vez has confiado en la palabra clave temida! Para hackear tu CSS, entonces este artículo es para ti.
Para consolidar sus bases, necesita saber cómo el navegador realmente lee CSS y cómo se anulan las reglas.
En primer lugar, el navegador leerá una hoja de estilo de arriba a abajo, lo que significa que con este código:
/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}La regla que especificó en la línea 10 será anulada y esa etiqueta de anclaje será azul porque el navegador considerará las reglas más abajo de su CSS para tener una mayor prioridad.
Esto también funciona con el orden real de importación de sus archivos css, por ejemplo:
Desde que colocó el custom.css después del style.css, todo lo que escriba en style.css (descontando por ahora, el peso de los selectores) quedará anulado y se sustituirá por lo que está en el custom.css, esta técnica se utiliza a menudo por creadores de temas para darle al usuario un espacio para agregar sus propios estilos sin cambiar el archivo principal. (Sin embargo, tenga en cuenta que custom.css no reemplaza a style.css por completo, solo se reemplazarán aquellas reglas que se reemplacen específicamente).
Todo lo anterior solo se aplica si usa el mismo peso en cada selector. Si especifica identificadores, clases o elementos de apilamiento, entonces les está dando peso, y eso es especificidad.
Hay cuatro categorías que definen el nivel de especificidad de un selector: estilos en línea (estos son a veces utilizados por javascript), ID's, clases y elementos. ¿Cómo medir la especificidad? La especificidad se mide en puntos, aplicando el valor de puntos más alto.
Sabiendo esto, si usa un selector como ese:
#content .sidebar .module li aSu peso total es de 122 puntos (100 + 10 + 10 + 1 +1), que es una identificación, dos clases y dos elementos.
ul li a {color: red;}Este selector tendrá un peso de 3, lo que significa que con solo agregar una clase en otro lugar, puede anularlo.
.content #sidebar {width: 30%;}Este selector tiene un peso de 110 puntos principalmente debido a la ID que agrega 100 puntos del total de 110.
.post p:first-letter {font-size: 16px;}Este selector tiene un peso de 12 puntos, ya que el pseudo-elemento: la primera letra solo pesa 1 punto y también lo hace la etiqueta p.
p {font-family: Helvetica, arial, sans-serif;}Este selector solo pesa 1 punto, este tipo de selector debe usarse en la parte superior de la página cuando marque los estilos básicos que luego pueden anularse para áreas específicas.
Siempre tenga en cuenta que para anular un selector de ID, debe escribir 256 clases para el mismo elemento, de esta manera:
#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}Solo así el segundo selector superará al que usa la ID.
La especificidad no es un aspecto llamativo de CSS, pero en mi opinión es el área más olvidada. Obtener su especificidad correcta no solo le ayuda a evitar errores, sino que acelerará tanto su desarrollo como su sitio final.
¿Sobreutilizas identificadores cuando escribes CSS? ¿Alguna vez vuelves a caer! ¿Importante? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de precisión a través de Shutterstock.