La especificidad de CSS es un tema que muchos nuevos codificadores front-end evitan durante el mayor tiempo posible. Suena complicado, hay todas estas reglas, ¡incluso puede que tengas que hacer un poco de matemáticas! ¿Qué tan malo es eso?
En última instancia, solo se puede evitar durante tanto tiempo. La especificidad es un concepto esencial que debe comprender para ser un desarrollador eficaz. Hoy los guiaré a través de los conceptos de especificidad de una manera simple y fácil de entender. ¡Es más fácil de lo que piensas!
El concepto básico de especificidad
Especificidad es una palabra divertida, desde el principio comunica la idea de que esto va a ser complicado. Afortunadamente, su corteza es más grande que su mordida. No hay razón para que no puedas elegir. más de estas cosas en unos minutos o menos.
Para dividir la aplicación práctica de la especificidad en algo que cualquiera pueda envolver en su mente, usemos una metáfora familiar.
¿Quién ganaría en una pelea?
Cuando eras niño, el mundo era un lugar mucho más fresco. Si se le diera la oportunidad de formular una y solo una pregunta a una entidad que todo lo sabe, no habría reflexionado sobre el significado de la vida ni habría aventurado una pregunta sobre si la paz mundial es posible o no, solo una cosa importaría. Si Batman y Spiderman se pelearan, ¿quién ganaría?
ScrewAttack escribe enormes piezas dedicadas a enfrentar héroes entre sí.
Hay una curiosidad innata en los niños para comparar constantemente las cosas y preguntar cuál es mejor. A medida que envejecemos, los tonos de gris reemplazan al blanco y negro y perdemos esta tendencia (los nerds somos, por supuesto, una excepción). Para entender la especificidad de CSS, debe volver a la infancia. Cuando te den dos selectores similares, siempre pregúntate: "¿Quién ganaría en una pelea?" La respuesta podría ser crítica para la forma en que codificas.
Para ver cómo funciona esto, enfrentemos a algunos selectores entre sí y veamos qué sucede.
Y el último será el primero
Para nuestra primera batalla, enfrentemos dos selectores esencialmente idénticos entre sí. ¿Cómo sabemos qué selector ganaría?
Hablar de guerra de clases. Dejando los puns a un lado, imagina que teníamos la siguiente configuración en nuestra página web:
Aquí tenemos un emparejamiento igual. Ambas clases se aplican a la misma división sin otras complejidades para desechar el ejemplo. Dejemos que luchen y veamos quién gana.
¡La caja es roja! Eso significa que? .Box? clase ganada ¿Pero por qué? Probablemente ya sabes la respuesta ¿verdad? Llegó el último. Cambia los selectores y vemos el resultado opuesto:
Aquí el cuadrado es azul porque el? .Blue? La clase llegó la última, anulando la? .box? clase.
La clase no cambia quien eres
Esa última batalla no fue muy interesante. Los oponentes eran demasiado iguales y el resultado era obvio. Ni siquiera hemos raspado la superficie de la especificidad todavía. Sin embargo, esa fue una base necesaria que necesitaba ser colocada.
Ahora nos sumergiremos en una batalla que es un poco más jugosa: ID vs. Class.
Nuestra configuración aquí es bastante similar a la última vez, solo que en lugar de dos clases, tendremos una clase y una ID:
Dada la regla que aprendimos la última vez, usted podría predecir que la clase ganaría en este escenario. Vamos a ver si eso resulta cierto.
Un malestar! A pesar de que la clase vino después de la identificación, todavía perdió. Esto indica que las ID son de alguna manera más fuertes que las clases en la batalla de la especificidad.
Pseudo combate de muerte
Antes de saltar para ver cómo funciona todo esto, veamos un ejemplo final. Aumentaremos la complejidad aquí para que pueda comenzar a apreciar cómo se puede aplicar este conocimiento en una situación del mundo real.
Oh broche! Apuesto a que este incluso hace tropezar a algunos de los lectores experimentados. Muchos de nosotros ni siquiera sabemos la diferencia entre los dos, y mucho menos cuál gana una partida de muerte por especificidad. Vamos a empezar esta fiesta.
¿Qué va a ser? ¿Será el h2 rojo o azul? Vamos a averiguar:
El pseudo elemento lo toma! La pseudo clase no tuvo oportunidad. ¿Pero por qué? ¿Qué detrás del escenario está ocurriendo el vudú aquí? ¿Cómo podemos estar seguros del resultado antes de intentarlo?
Reglas de especificidad
La prueba y el error son una excelente manera de aprender, pero en última instancia, hay demasiados escenarios posibles diferentes para analizar toda la información que deberíamos saber. Lo que necesitamos es una manera difícil y rápida de decidir a qué selectores el navegador le da más importancia y por qué.
Resulta que, de hecho, hay reglas simples que gobiernan la especificidad. De hecho, hay incluso un práctico sistema de puntos:
Un selector de CSS dado puede tener cualquier número de piezas de este rompecabezas. El truco para descubrir la especificidad es sumarlos. El que tenga el puntaje más alto gana. Es así de simple.
Sin embargo, a nadie le gustan las matemáticas, así que para probar la especificidad de un selector, podemos usar la asombrosa calculadora de especificidad en Keegan Street.
Con esta gran herramienta, podemos escribir dos selectores y se calculará automáticamente una puntuación para cada uno. El primer selector en el ejemplo contiene una clase, una pseudo-clase y dos elementos (puntuación: 0,0,2,2). El segundo selector lo supera con una identificación, una clase, una pseudo clase y un elemento (puntuación: 0,1,2,1).
La regla aquí, como puede ver, es que el selector con el mayor grado de especificidad gana.En otras palabras, los selectores más específicos triunfan sobre los selectores menos específicos.
Dado nuestro ejemplo anterior de una clase frente a una identificación, podemos ver por qué la identificación gana. Su especificidad es mucho más alta que la de la clase, por lo que reemplaza a la clase.
Reglas especiales
Dada la calculadora de especificidad, podemos resolver la mayoría de los escenarios, pero hay algunas bolas de curva que debemos tener en cuenta.
- El selector universal (*) vale 0
- Cuando dos selectores tienen la misma especificidad, el último gana.
- Los elementos nunca pueden vencer a un selector de clase, incluso si los apilas
- ! importante es Superman, puede golpear casi cualquier cosa
El último aquí es el más interesante, así que echemos un vistazo a un ejemplo. Aquí hay algunos HTML y CSS a considerar:
Bastante simple, ¿verdad? Usando nuestro sistema de puntos, la clase tiene una puntuación más alta que el elemento, por lo que el titular saldrá rojo. Pero, ¿y si echamos a Superman en el escenario?
Ahora hemos amañado la lucha. En este caso, el titular en realidad sale azul! La! Regla importante dice, 'atornillar tu especificidad? y hace lo que quiere.
Menos es más
Ahora que entiendes la especificidad, podrás manipular tu CSS para hacer muchas cosas locas. Solo recuerda que con gran poder viene una gran responsabilidad.
En CSS, la regla general es que menos es más. Cuanto más cortas sean tus reglas, mejor. Nunca usar .list ul> li> a cuando li a funcionará bien Los selectores más cortos son más eficientes y más fáciles de leer. A veces tienes que ser elegante, pero deja que esa sea la excepción, no la regla.
Un rompecabezas para resolver
Espera un segundo. Las reglas debían explicar los resultados que recibimos en nuestras pruebas iniciales, ¿no es así? Entonces, ¿qué pasa con este?
Según entiendo las reglas, una pseudo clase supera a un pseudo elemento, entonces, ¿por qué gana el pseudo elemento aquí? Quizás estemos equivocados acerca de cuál es el pseudo elemento, vamos a ver nuestro gráfico.
No Teníamos razón acerca de que el primer hijo es la pseudo clase versus la primera línea, el pseudo elemento. Tal vez estamos calculando mal? Vamos a consultar la calculadora:
En lo que respecta a la calculadora, el título debe ser azul porque el primer hijo vence en la primera línea. Pero no es así como funciona en el navegador. ¿Lo que da? Tal vez nuestra calculadora está rota, probemos otra.
De acuerdo con este también, el primer hijo debería tener un valor de especificidad más alto y, por lo tanto, debería ganar. pero no lo hace He intentado usar la sintaxis de un solo colon, cambiando el orden; nada funciona. El pseudo elemento siempre gana, no importa lo que le lance.
Aquí es donde realmente se vuelve loco, incluso si lanzo un elemento de estilo en línea, que debería vencer a casi cualquier cosa, ¡la cosa aún está roja!
Conceptualmente, esto casi tiene sentido. Nuestra pseudo clase está apuntando a todo el elemento h2, mientras que nuestro pseudo elemento está apuntando solo a la primera línea de ese elemento, lo que parece más específico.
Su explicación aquí
Para ser descaradamente honesto, estoy un poco desconcertado aquí. En su mayor parte, la especificidad es bastante directa, pero parece que no puedo envolver mi mente en torno a este. Mi instinto es que quizás sea algún tipo de problema de herencia, pero no estoy seguro. También podría ser algo similar a :no() lo que tiene un significado especial con respecto a la especificidad (solo los elementos entre paréntesis cuentan, por sí solo es un cero).
¡En respuesta a nuestro pequeño rompecabezas, aquí hay algunas respuestas útiles de los lectores!
Tim Pietrusky
"De acuerdo con la especificación, solo otro elemento que contenga el contenido de la primera línea es más específico que el pseudo-elemento de primera línea". - CodePen Demo
Thomas
? Piense en la primera línea como un Elemento adicional (como el intervalo) dentro del título, envolviendo solo la primera línea, por lo que su objetivo es un elemento dentro de la h2, como
primera linea segunda linea
El color de fondo del h2 solo se usaría (heredaría) si no se declarara ningún valor para: ¿primera línea?
Otras lecturas
Ya se han publicado muchos artículos geniales sobre especificidad, aquí hay algunos:
- Especificidad de CSS: cosas que debes saber - Smashing Magazine
- Específicos sobre la especificidad de CSS - CSS Tricks
- Especificidad CSS para jugadores de poker - Soy una cámara
- Entendiendo la especificidad de CSS - Jonathan Snook
- El poder de la especificidad de CSS - Temas de bricolaje
Conclusión
Como acabamos de ver, la especificidad de CSS es muy simple, excepto cuando es muy compleja. Puede y debe aprender lo básico para evitar cualquier resultado inesperado, pero cuando se llega a esto, es posible que sea necesario un buen ensayo y error a la antigua si se encuentra en una situación difícil.
¿Qué piensas? ¿Entiendes la especificidad tanto como deberías? ¿Puedes explicar el desconcertante escenario en el que nos encontramos arriba?