Especificidad CSS: una guía detallada (incluidas las mejores prácticas, ejemplos)

La especificidad de CSS es una herramienta importante en el arsenal de los diseñadores y desarrolladores web y cualquier persona que cambie el diseño del sitio jugando con hojas de cascadas. Si alguna vez ha estado en la situación en la que simplemente no podría obtener un elemento para comportarse o mirar como quisiera, probablemente sintió su poder.

¿Pero no sería genial explotar el CSS específico para sus propias ganancias, en lugar de sentirse en su madera? Si solo sacudiste la cabeza, entonces viniste al lugar correcto. Aquí mismo, ahora mismo, repasaremos este importante concepto, para que pueda usarlo para controlar el aspecto de su sitio y el tema de WordPress en lugar de lo contrario.
Comprender la especificidad de CSS: un curso abusivo CSS Entonces, ¿de qué estamos hablando cuando decimos la especificidad de CSS? La versión corta es que esta es la forma en que el navegador decide qué valor de la propiedad se aplica para qué elemento en la página. Para comprender este proceso, primero debe comprender cómo funciona CSS en general. Para esto, tratemos primero con una terminología. Aquí hay una pieza típica de marcado CSS: .selector {propiedad: valor; } ¿Qué significan todas estas cosas?
Selector: esta es la parte que describe el elemento al que se aplica esta pieza de CSS. Puede ser algo Div, P, H1, o una clase o ID como .Widget o #-navegación principal.
Propiedad: la regla aplicada al elemento seleccionado. Puede ser cualquier cosa, desde el margen sobre el color hasta la flexión.
Valor: este es el valor de la propiedad, por ejemplo, podría ser 20px para la propiedad de margen-izquierda.
Cómo anular el CSS además de lo anterior, debe saber que los navegadores procesan las hojas superiores. Esto significa que las declaraciones que aparecen más tarde en la hoja de estilo abruman las que aparecieron antes. Widget {Font-Size: 18px; } .widget {font-size: 16px; } En el ejemplo anterior, puede ver que ambas declaraciones están dirigidas al mismo selector y propiedad. Sin embargo, debido a que este último está en la parte inferior, su valor prevalecerá. El navegador siempre usará la última declaración. como sea, hay una excepción. Si la primera declaración es más específica que la que sigue, se aplicará. Por ejemplo, con la marca a continuación, cualquier elemento con clase de widget tendrá el tamaño de la fuente establecido en 18 píxeles en lugar de 16 .. } .widget {font-size: 16px; } Eso se debe a .SeBar .Widget es más dirigido que .Widget. Y esto es casi la esencia de la especificidad CSS.
¿Por qué importa esto? Entonces, ¿por qué es importante conocer la especificidad de CSS? Porque es el principio el que determina qué propiedades y valores se aplican a un elemento particular. Esto incluye casos en los que hay posibles conflictos. En consecuencia, la especificidad de CSS es la solución para muchos casos en los que encuentra problemas en la aparición de estilos en la página. A menudo llega a ser un problema de especificidad. Por el contrario, si usted es un autor del tema, saber cómo usar la especificidad correctamente es crucial para evitar usuarios frustrantes que desean hacer ajustes, por ejemplo, en un tema infantil. Para este propósito, pasaremos por alto algunas de las mejores prácticas a continuación.
Entonces, ¿cómo se calcula la especificidad? Para poder solucionar los problemas de especificidad, debe conocer la forma en que funciona. Hay reglas claras que la gobiernan y, cuando las entiendes, puedes usarlas. El orden de los selectores primero, los selectores tienen todos los pesos diferentes en términos de especificidad. Aquí están ellos en orden creciente, de menos a más específico: tipo selectores, pensen sobre div, h1, a, p pero también a pseudo-elementos como: antes y: después.
Selectores de clase, es decir, clases normales como.
Selectores de ID: estos son selectores que generalmente se aplican de manera única a un elemento particular en la página, escrito como #Main -Navigation.
Estilos en línea: declaraciones en línea como
siempre un estilo de sobrecarga en archivos CSS externos. Lo mismo es cierto para los estilos declarados en la sección directamente en el archivo HTML. Y tienen prioridad.
Aquí hay un ejemplo para conducir el punto en casa:
#Optin-forma {color: rojo; } [] {color azul; } Aunque ambos selectores se refieren técnicamente a la ID, uno de ellos es un selector de atributos, mientras que el otro es un selector de ID. Como resultado, este último toma el pastel. Los valores de especificidad “calculados” tampoco son un nombre incorrecto en el caso de la especificidad CSS. Los navegadores realmente aplican valores numéricos a diferentes tipos de selectores para realizar su especificidad. Comienza desde 0 (0.0,0,0), selectores tipo 1 (0.0,0,1), selectores de clase de clase 10,1,0, IDS 100 (0, 1,0,0) y estilos en línea 1,000 (1,0 , 0,0).
También los recoges entre ellos. Entonces, si usa una ID seguido de un selector de tipos (como # #main-navegación a), tiene un valor de 101. Sin embargo, es importante tener en cuenta que este no es en realidad un sistema básico de 10. Por ejemplo, (( 0.2,11,3) no es lo mismo que (0.3,1,3). Sin embargo, en aras de la simplicidad, está bien pensarlo en estos términos. Los selectores con su especificidad establecida en 0 incluyen cosas como el selector universal *, combinadores como>, +, ~, valores heredados y también medios. Esto significa que ni siquiera aumento la especificidad. Más sobre esto a continuación. Seamos más específicos: reglas y ejemplos primero, disculpas por el juego de palabras anterior. En segundo lugar, ahora que sabe cómo funciona el CSS específico en general, hay, por supuesto, más que saberlo. Las reglas generales primero, las reglas generales de CSS todavía se aplican. Cuando tiene varias declaraciones que son tan específicas y se dirigen al mismo elemento, se aplica la declaración que aparece en la hoja de estilo. .Sidebar .Widget {Font-Style: Normal; } .Container .Widget {Font-Style: Italic; } Dado que cada uno está formado por dos selectores de clase, ambas declaraciones tienen el mismo nivel de especificidad. Como resultado, se aplica la regla de cascada y cualquier texto dentro del widget se vuelve cursiva.
Por otro lado, la proximidad no importa. Si observa la estantería HTML a continuación, puede ver que la barra lateral está más cerca del objetivo CSS que al contenedor. ! ¡Estos, solo porque está más cerca, no significa que se juegue. Con el mismo número de tipo selector, prevalece el valor del último. La especificidad y la herencia de CSS La especificidad también es importante en el contexto de la herencia de los valores. Ciertas propiedades, como la familia de fuentes o el color, cuando se establecen en un elemento parental, se aplica automáticamente a sus hijos. Esto se llama herencia y es por eso que puede establecer una tipografía para un sitio completo, aplicándola a la etiqueta del cuerpo. Sin embargo, es importante tener en cuenta cómo funciona la especificidad en este contexto. Parece que cuando sus elementos objetivo directamente, siempre tendrán prioridad sobre la marca hereditaria, sin importar cuán específica sea la regla heredada. En el contexto del ejemplo anterior, cualquier propiedad aplicada de widget ganará contra aquellos heredados en el contenedor.
.Container {Font-Family: Tahoma; } .Widget {Font-Family: Verdana; } Específico e! IMPORTANTE hay un elefante en la habitación cuando se trata del CSS específico y su nombre es! Si no está familiarizado con esta propiedad, es una forma de pasar por especificidad. ¡Puede agregar! Importante al final de cualquier valor de propiedad para que sobrescriba cualquier valor que siga.
P {Orden de fondo: amarillo! IMPORTANTE; } .container .Sidebar .Widget #text-exame {background-color: lightgreen; } En el ejemplo anterior, la segunda declaración es claramente más específica que la primera. Sin embargo, solo porque el primero incluye! Importante, el color de fondo se vuelve amarillo, no de verde claro. Aunque desde un punto de vista técnico no está relacionado con el CSS específico, la regla importante tiene un impacto en él. Sobre el uso correcto de la regla! Hablaremos a continuación. Por ahora, es importante tener en cuenta que la especificidad se aplica aquí. Cuando tiene dos declaraciones conflictivas, ambas usando! Importante, la que tiene una mayor especificidad ganará. Por otro lado, si tiene dos instrucciones! Importantes con el mismo nivel de especificidad, aplique la cascada y la última instrucción es la que usará el navegador. : es (),: no () y: donde () hay algunos casos interesantes con algunas funciones CSS. Dos ejemplos son: is () y: no (). Estos son técnicamente pseudo-clases, pero no se consideran como tales. Sin embargo, los selectores colocados dentro de ellos generalmente importan. : is (.container .widget) p {color: darkoldenrod; } .Container P {Color: BlanchedalMond;
} En este caso,: es () no importa para la especificidad, sin embargo, su contenido. El contenedor .Widget y el suyo es mayor que solo. Contenedor a continuación. Por lo tanto, el texto será de Dargoldenrod y no Blanchedalmond. (Además, debe hacer obvio que hago una inmersión profunda en los nombres de los color que tiene para ofrecer).: Donde (), por otro lado, hay una característica de CSS muy nueva que, como se menciona en el artículo atado, siempre tiene una especificidad de cero. Entonces, si lo usa en el ejemplo anterior en su lugar: IS (), el resultado será exactamente opuesto. Las mejores prácticas de especificidad CSS Ahora que sabemos los detalles sobre cómo funciona, superemos algunas de las mejores prácticas para usar la especificidad CSS. Marca de redacción Lo primero que debe saber es cómo usar esto al escribir CSS. Esto significa que puede usar el CSS específico para obtener los resultados, producir un código limpio y también permitir que otros realicen ajustes a su diseño sin romperse el cabello o volver a la opción nuclear. El principio de guía básico aquí es el uso del menor número de selectores. Como se mencionó, las hojas de estilo caen en la cascada para que pueda usar selectores genéricos para líneas grandes y luego ser más precisos cuando sea necesario. Abra la hoja de estilo de cualquier tema moderno de WordPress y ya verá este principio en el trabajo: Body {Color: #111; Font-Family: “Non-BreakingSpaceverride”, “Hoefler Text”, Garamond, “Times New Roman”, serif; Font-peso: 400; Tamaño de fuente: 1em; } .Main-navegación .Manu>
li> a {color: #0073AA; Font-peso: 700; } La marca anterior es del tema de veinte diecinueve. Como puede ver, define estándares para todas las tipografías a través del selector del cuerpo y luego sobrescribe el color y el peso de la fuente con una declaración más específica, cuando sea necesario. Un segundo principio es confiar más en la especificidad que en el orden de los selectores, de lo contrario, puede mezclar constantemente piezas de código, de modo que los selectores estén en el lugar correcto para anularse entre sí. Esto hace que las hojas de estilo sean muy difíciles de mantener. Finalmente, es posible que desee mirar la arquitectura de nombres de CSS, como BEM, que han pensado en las convenciones de nombre de especificidad. Cómo anular el CSS existente Cuando intente hacer cambios en un tema existente o cuando trabaje con un tema infantil, a menudo tendrá que crear declaraciones más específicas. En realidad, esto es bastante simple, a menudo puede lograrlo incluyendo uno o más elementos antes de su objetivo. Esto aumenta automáticamente el nivel de especificidad. Y aquí lo mismo se aplica como arriba. Use solo tanto como sea necesario para lograr su objetivo. En el ejemplo que utilicé, simplemente puede apuntar al texto a través de .Container P o #Ejemplo-Text. También podría hacer .SideBar .Widget #TEXT-Ejemplo, sin embargo, no mejoraría nada y también haría que el CSS sea más difícil de leer y, si es necesario, podría anular más bajo. ¡Cuándo usar! IMPORTANTE MIESTA, ¡tenemos que hablar!

importante. Como ya mencioné, debes usar esto lo menos posible. Tocando sus objetivos, esta propiedad es el equivalente a una excavadora y puede ser un solucionador de problemas (como lo habría sentido en algún momento de su carrera, tratando de anular la marca de otra persona). Por lo tanto, siempre debe tratar de realizar la estructura CSS existente y cómo usar la especificidad para anularla. Sin embargo, hay algunos casos en los que el uso! Lo importante es legítimo: para fines de solución de problemas, por ejemplo, para ver si se puede aplicar el CSS deseado y cómo se vería.
Estilos en línea sobrescritos que no tienes otra forma de cambiar.
Cuando desee determinar que un elemento debe usar un estilo específico sin importar qué.
Anular un CSS particular que proviene de una biblioteca externa. Por ejemplo, cuando usa Bootstrap, puede encontrar algunas cosas que no puede sobrescribir.
Anular las declaraciones existentes con! Es importante que no tenga forma de cambiarlas (por ejemplo, que son parte de un complemento). En este caso, preste atención a las reglas de especificidad de las que hablamos anteriormente.
Herramientas de especificidad CSS En el lado final, repasemos algunas herramientas para aprender/tratar la especificidad:
Computadora de especificidad CSS: esta es una computadora para descubrir los detalles de los selectores. Si está bloqueado, simplemente copie y péguelos allí. El sitio le dará un valor numérico, lo que le ayuda a darse cuenta de por qué algo no funciona.
Especificidad: un diagrama divertido que explica la especificidad visual con peces.
CSS Specticity Wars, similar a la especie, pero con las figuras de Star Wars.
Resumiendo … Los problemas de especificidad de CSS son una de esas cosas que encontrará de una forma u otra cuando se mezcle con hojas de estilo, diseño y marcado.Al principio pueden ser frustrantes, cuando no puedes darte cuenta de “¡por qué el infierno de esto no hará lo que digo!”.Sin embargo, una vez que lo comprende, la especificidad de CSS es una herramienta muy útil que debe tener en el cinturón de servicios públicos para el diseño web.Arriba, repasamos los principios básicos de cómo, ejemplos, mejores prácticas y algunos instrumentos funcionan.Ahora debería poder usarlo en la naturaleza, que esperamos aliviarlo en el futuro.¿Tiene una historia en la que el CSS específico ha tenido lo mejor de ustedes?¡Por favor, diga en los comentarios!