Curso Completo de CSS de principiante a avanzado - CURSO de CSS - 18 ¿Que es la ESPECIFICIDAD en CSS? (Como se CALCULA y como FUNCIONA)

Puntos Clave de la Lección

• Definición de especificidad: Es el conjunto de reglas que aplican a los selectores para determinar qué estilo prevalece sobre un elemento. A mayor especificidad del selector, mayor será su probabilidad de ser aplicado [00:00:11].
• Tabla de valores de especificidad: Cada selector posee un peso numérico: las etiquetas tienen un valor de 1, las clases o atributos valen 10, los identificadores (ID) equivalen a 100 y los estilos CSS en línea poseen un valor máximo de 1000 [00:00:52].
• La lógica de la cascada frente a la especificidad: Aunque la cascada aplica el último estilo definido, un selector más específico anulará cualquier regla previa, sin importar su orden de aparición en la hoja de estilos [00:04:39].
• Cálculo mediante combinación de selectores: El nivel de especificidad es acumulativo; al combinar varios selectores, sus valores individuales se suman para otorgar un puntaje final. Por ejemplo, un h1 con una clase tiene un peso de 11 (1 + 10) [00:05:30].
• Prioridad de los estilos en línea: Los estilos aplicados directamente en el atributo HTML "style" tienen un peso de 1000, lo que los hace casi inamovibles desde una hoja de estilos externa, razón por la cual su uso no es considerado una buena práctica [00:07:50].

Productos útiles para este curso

Para seguir esta lección de forma práctica, se recomienda el uso de un editor de código como Visual Studio Code, el cual permite visualizar la especificidad de los selectores simplemente al pasar el puntero sobre ellos.

Resumen Final

Dominar la especificidad es crucial para evitar errores de visualización en el diseño web. Al comprender que los selectores de ID tienen más peso que las clases, y estas más que las etiquetas, el desarrollador puede escribir un CSS mucho más limpio, predecible y fácil de mantener, evitando la dependencia excesiva de los estilos en línea o el uso innecesario de reglas para forzar cambios visuales.

Créditos del Autor

Esta lección ha sido adaptada del contenido original creado por el canal, especializado en desarrollo web y programación frontend. Se recomienda visitar su canal oficial de YouTube para profundizar en estos contenidos.